JSX 中的虚拟 DOM 操作（React）答案

【问题标题】：virtual DOM Manipulation in JSX (React)JSX 中的虚拟 DOM 操作（React）
【发布时间】：2017-05-02 00:46:02
【问题描述】：

我正在阅读Full Stack React The Complete Guide 并遇到了这段代码sn-p：

render() {
    if(this.props.timerIsRunning){
        return(
            <div
                className='ui bottom attached red basic button'
                onClick={this.props.onStopClick}
            >
            Stop
            </div>
        )    
    } else {
        return(
            <div
                className='ui bottom attached green basic button'
                onClick={this.props.onStartClick}
            >
            Start
            </div>
        )  
    }
}

它使用 if 语句来确定组件将呈现什么内容，可以是停止按钮，也可以是秒表的开始按钮。这个例子让我想知道是否有办法使用更少的空间来做到这一点。有没有办法创建 div，然后根据 this.props.timerIsRunning 的值向该 div 添加某些属性和类？如果这不是 JSX，我会提出这样的建议：

<div id=timerbutton></div>
<script> 
    let timerButtonDiv = document.getElementById(timerbutton)
    if(this.props.timerIsRunning) {
        timerbuttonDiv.className = 'ui bottom attached red basic 
        button'
        timerbuttonDiv.innerHTML = Stop
    } else {
        timerbuttonDiv.className = 'ui bottom attached green basic 
        button'
        timerbuttonDiv.innerHTML = Start
    }
</script>

所以...让这个例子说明我缺乏对 JSX 的理解，但我想，我只是想知道（来自 Angular 1.X 背景）是否存在相当于 ng-show 或 ng 的 React/JSX -班级。更广泛地说，我想知道就标准 DOM 操作而言，虚拟 DOM 和实际 DOM 之间的界限在哪里。任何关于 React 如何转置 JSX 的资源肯定会有所帮助。

【问题讨论】：

标签： reactjs ecmascript-6 react-jsx jsx

【解决方案1】：

JSX 允许您在某些地方使用 {} 块来使用任意 JS。你可以在这些地方查看timerIsRunning

const running = this.props.timerIsRunning;
return (
    <div
        className={
          `ui bottom attached ${running ? "red" : "green"} basic button`
        }
        onClick={running ? this.props.onStopClick : this.props.onStartClick}
    >
    {running ? "Stop" : "Start"}
    </div>
);

或使用解构将事物组合在一起

const {color, handler, text} = this.props.timerIsRunning ? {
    color: "red",
    handler: this.props.onStopClick,
    text: "Stop",
} : {
    color: "greed",
    handler: this.props.onStartClick,
    text: "Start",
};
return (
    <div
        className={`ui bottom attached ${color} basic button`}
        onClick={handler}
    >
    {text}
    </div>
);

【讨论】：

这是一个很棒的答案！谢谢！ JSX 的 {} 部分之前的那个 '$' 吗？这是什么意思？我真的很喜欢使用三元逻辑。它超级干净整洁。
className={} 部分是 JSX，这些花括号内的所有内容都是 JS，所以在这种情况下，${running ? "red" : "green"} 是标准 ES6 模板文字的表达式：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我通过参考这篇文章发现这是模板文字的语法：stackoverflow.com/questions/27678052/…再次感谢。

【解决方案2】：

ng-show 的等效项将是 React conditional rendering。

ng-class 的等价物（有点）是 classnames 包（不是 React 的一部分），它允许您像这样编写 className 道具：

return (
    <div
        className={classnames('ui bottom attached basic button', {
          red: this.props.timerIsRunning,
          green: !this.props.timerIsRunning,
        })
        onClick={running ? this.props.onStopClick : this.props.onStartClick}
    >
    {running ? "Stop" : "Start"}
    </div>
);

【讨论】：