virtual DOM JSX 中的操作（React）

Question

我正在阅读 Full Stack React The Complete Guide 并且遇到了这个代码片段：

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 语句来确定组件将呈现什么，是秒表的停止按钮还是开始按钮。这个例子让我想知道是否有一种方法可以使用 less space 来做到这一点。有没有一种方法可以创建 div，然后根据 this.props.timerIsRunning 的值向 div 添加某些属性和 classes？如果这不是 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 背景）是否有 React/JSX 相当于 ng-show 或 ng-class。更广泛地说，我想知道就标准 DOM 操作而言，虚拟 DOM 和实际 DOM 之间的界线在哪里。任何关于 React 如何转换 JSX 的资源肯定会有帮助。

Answer 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>
);

Answer 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>
);

virtual DOM JSX 中的操作（React）

virtual DOM Manipulation in JSX (React)

jsx

ecmascript-6

reactjs

react-jsx