Wie Sie einen bedingten Ausdruck (if) in einem React render() korrekt einrichten

Question

Ich möchte in der Lage sein, einen bestimmten HTML-Abschnitt zu rendern, wenn die Bedingung wahr ist. Ich bin neugierig auf die korrekte Art, einen bedingten if-Ausdruck innerhalb einer react render() zu erstellen.

Ich schaute online nach und fand eine Möglichkeit, dies mit einem Inline-Ausdruck zu tun, um zu überprüfen, ob der Wert wahr ist, wenn ja, dann wird das verbleibende Element gerendert.

Ich habe auch eine andere Möglichkeit, um Variablen für die HTML-Rendering zu erstellen.

Frage:

Ich war nicht in der Lage, beide td Tags als einen für den Zustand zu wickeln. Es sieht so aus, als müsste dies per td Tag gemacht werden.

Gibt es eine Möglichkeit, dies um beide Tags herum zu tun oder muss ein anderes Element um sie herum eingerichtet werden?

Ich dachte, dies könnte auch mit einer => Funktion möglicherweise eingerichtet werden.

-Code für die Inline() Ausdruck machen:

render() { 

    // get the data from the JSON entity for each attribute 
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute => 
     <td>{this.props.object.entity[jsonAttribute]}</td> 
    ); 

    return (
     <tbody> 
     <tr> 
      {tdsForObject} 
      {this.props.objectTypeEditable && 
      <td> 
       <UpdateDialog object={this.props.object} 
         objectName={this.props.objectName} 
         attributes={this.props.attributes} 
         onUpdate={this.props.onUpdate}/> 
      </td> 
      } 
      {this.props.objectTypeEditable && 
       <td> 
       <button onClick={this.handleDelete}>Delete</button> 
      </td> 
      } 
     </tr> 
     </tbody> 
    ) 
    } 

Code Schaltflächen erstellen außerhalb der Render()

render() { 

    // get the data from the JSON entity for each attribute 
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute => 
     <td>{this.props.object.entity[jsonAttribute]}</td> 
    ); 

    var updateButton; 
    var deleteButton; 

    // if the object can be edited create the update and delete buttons 
    if (this.props.objectTypeEditable) { 
     updateButton = (
     <td> 
      <UpdateDialog object={this.props.object} 
        objectName={this.props.objectName} 
        attributes={this.props.attributes} 
        onUpdate={this.props.onUpdate}/> 
     </td> 
    ); 

     deleteButton = (
     <td> 
      <button onClick={this.handleDelete}>Delete</button> 
     </td> 
    ); 
    } 

    return (
     <tbody> 
     <tr> 
      {tdsForObject} 
      {updateButton} 
      {deleteButton} 
     </tr> 
     </tbody> 
    ) 
    } 

Answer 1

JSX ermöglicht es Ihnen nicht, 2 nebeneinander Elemente zurückzugeben. Es kann nur 1 Element zurückgeben. Also können Sie diese 2 entweder in ein einzelnes Element einbinden und die gleiche Bestätigung verwenden wie jetzt.

{this.props.objectTypeEditable && 
    <div class="wrapper"> 
     <td> 
      [...] 
     </td> 
     <td> 
      [...] 
     </td> 
    </div> 
} 

Sie können auch inline self invoked function verwenden und eine Reihe von JSX Elemente zurück. (die Rendermethoden werden automatisch durchlaufen und rendern). Hier verwende ich ES6 Pfeil Funktion direkt den this Bezug zu binden, aber es ist wahrscheinlich machbar mit einer normalen Funktion und Bindung mit der Hand wie dieser .bind(this)

{(() => { 
    let elements = []; 
    if(this.props.objectTypeEditable) { 
     // push td elements in array 
    } 
    return elements; 
})()} 

Answer 2

Sie benötigen einen ternary Ausdruck

Zustand zu benutzen? expr1: expr2

render() { 

    // get the data from the JSON entity for each attribute 
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute => 
     <td>{this.props.object.entity[jsonAttribute]}</td> 
    ); 

    return (
     <tbody> 
     <tr> 
      {tdsForObject} 
      { this.props.objectTypeEditable 
      ? <td> 
       <UpdateDialog object={this.props.object} 
         objectName={this.props.objectName} 
         attributes={this.props.attributes} 
         onUpdate={this.props.onUpdate}/> 
       </td> 
      : null 
      } 
      { this.props.objectTypeEditable 
      ? <td> 
       <button onClick={this.handleDelete}>Delete</button> 
       </td> 
      : null 
      } 
     </tr> 
     </tbody> 
    ) 
    } 

Es ist nicht möglich, mehr als ein Inline zu verwenden. Die Dokumentation und die Beispiele von React verwenden ternäre Operationen und empfehlen sie als Standardmuster. Wenn Sie eine Methode gegenüber der anderen bevorzugen, sind sie beide gültig, haften Sie nur um der Konsistenz willen :)