JSXで仮想DOM操作に（リアクト）

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文を使用して、いずれかの停止、またはストップウォッチのスタートボタン。この例では、少ないスペースでそれを行う方法があるかどうか疑問に思っています。 divを作成し、this.props.timerIsRunningの値に応じてそのdivに特定のプロパティとクラスを追加する方法はありますか？この例では、JSX理解の私の不足のために話すが、私は推測アンギュラ1から来る（場合、私は疑問に思ってみましょう...だから

<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なかったら、私はこのような何かを提案します.X背景）には、ng-showまたはng-classのReact/JSXに相当するものがあります。もっと広義には、標準DOM操作に関する限り、仮想DOMと実際のDOMとの間の線がどこにあるのだろうかと思います。 ReactがJSXをどのように転置するかについてのあらゆるリソースが確かに役立ちます。

Answer 1

JSXでは、特定の場所で{}ブロックを使用して任意のJSを使用できます。あなたはこれらの場所

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

のそれぞれにおけるtimerIsRunningをチェックしたり、ng-showの同等はReact conditional renderingになります

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-classの（ちょっと）

同等のは、あなたがこのようなclassName小道具を書くことができますclassnamesパッケージ（リアクトの一部ではない）である：

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