Reactレンダー（）内の条件式（if）を正しく設定する方法

Question

条件が真である場合、HTMLの特定のセクションをレンダリングできるようにします。私は、react render（）内の条件if式を設定する正しい方法について興味があります。

オンラインで調べて、インライン式でこれを行う方法を見つけて、値が真であるかどうかを確認し、そうであれば残りの要素をレンダリングします。

また、レンダリングするhtmlの変数を作成する別の方法を設定しました。

質問：

私は条件の一つとして、両方のtdタグをラップすることができませんでした。これは、tdタグごとに行う必要があるようです。

両方のタグの周りでこれを行う方法はありますか、またはそれらの周りに別の要素を設定する必要がありますか？

おそらく=>機能を使用して設定することもできます。

コードインラインのレンダリング（）式：

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

コード（レンダリングの外にボタンを作成する）

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では2つの並んだ要素を返すことはできません。それは1要素だけを返すことができます。だからええ、1つの要素の中にそれらの2つをラップすることができますし、今と同じ検証を使用することができます。

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

inline self invoked functionを使用して、JSX要素の配列を返すこともできます。 （レンダリングメソッドは自動的にループしてレンダリングします）ここで私は直接this参照をバインドするES6矢印機能を使用しますが、それはおそらく正常な機能を持つなんとかです。この.bind(this)

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

Answer 2

あなたはternary表現

条件を使用する必要がありますか？ 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> 
    ) 
    } 

複数のインラインを使用することはできません。 Reactのドキュメンテーションと例は、三項演算を使用し、それをデフォルトパターンとして推奨しています。他の方法よりも1つの方法を好む場合は、どちらも有効です。一貫性のために1つに固執してください:)