virtuelle DOM-Manipulation in JSX (Reagieren)

Question

Ich lese Full Stack React The Complete Guide Und kam in diesem Code-Schnipsel:

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

Es verwendet einen if-Anweisung zu bestimmen, welche durch die Komponente gerendert wird, entweder einen Anschlag oder Startknopf für eine Stoppuhr. Dieses Beispiel hat mich gefragt, ob es einen Weg gibt, dies mit weniger Platz zu machen. Gibt es eine Möglichkeit, das div zu erstellen und dann bestimmte Eigenschaften und Klassen zu diesem div hinzuzufügen, abhängig vom Wert von this.props.timerIsRunning? Ist dies nicht JSX wäre, würde ich so etwas wie dies vorschlagen:

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

Also ... lassen Sie dieses Beispiel auf meinen Mangel an JSX Verständnis sprechen, aber ich denke, ich frage mich nur, wenn (aus einem Schräg 1 .X background) gibt es ein React/JSX-Äquivalent von ng-show oder ng-class. Im weiteren Sinne frage ich mich, wo sich die Zeilen zwischen virtuellem DOM und tatsächlichem DOM befinden, was die Standard-DOM-Manipulation betrifft. Irgendwelche Ressourcen dazu, wie React JSX umsetzt, wären sicherlich hilfreich.

Answer 1

Mit JSX können Sie {} Blöcke an bestimmten Stellen verwenden, um JS zu verwenden. Sie könnten

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

oder Destrukturierung zu gruppieren Dinge verwenden timerIsRunning in jedem dieser Ort überprüfen

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

Das Äquivalent ng-show wird React conditional rendering sein.

Das Äquivalent (ein bisschen) von ng-class ist das classnames Paket (nicht Teil der Reaktion), die Sie className Requisiten wie diese schreiben können:

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