Reactを使用して複数の条件に基づいてHTMLコードをレンダリングする

Question

Array#map methodを使用してレンダリングしたいアイテムがいくつかあり、それらを反復して目的の要素を戻します。しかし、HTMLが構築されるいくつかの条件があります。ここで

はコードです：

<span className="items-overview"> 
    { 
    this.props.obj.items.map((item, index) => { 

     return (
      (item.LeftParenthesis ? "<b>" + item.LeftParenthesis + "</b>" : "") 
      + "<i>" + item.Description + "</i>" 
      + (item.RightParenthesis ? "<b>" + item.RightParenthesis + "</b>" : "") 
      + (item.LogicOperand && index < this.props.obj.Conditions.length - 1 ? "&nbsp;<span>" + item.LogicOperand + "</span>" : "") + "&nbsp;"         
     )    
    }) 
    } 
</span> 

結果は、以下の（唯一つの項目がありますと仮定した場合）：

アプローチ私は

1. を試みたが、私は複数のIF文を持つことができますか何を返すかを決定するswitch文ですが、これはちょっと面倒です。私はこの
2. を避けることを好む私は本当にこのためdangerously-set-inner

任意の回避策を使用したくありませんか？

Answer 1

が文字列を使用しないでくださいだけでレンダリングされるコンポーネントを使用することができますReactがすべてを正しくレンダリングできるようにします。これは、条件に基づいて要素をレンダリングするためにReact's conditional renderingを使用します。

これは回避策ではありませんが、これは要素を条件付きでレンダリングする正しい方法です。

Answer 2

文字列の代わりに実際の反応コンポーネントを使用してみませんか？

が

return (
    <span> 
    { 
     item.LeftParenthesis && 
     <b>{item.LeftParenthesis}</b> 
    } 
    <i>{item.Description}</i> 
    { 
     item.RightParenthesis && 
     <b>{item.RightParenthesis}</b> 
    } 
    { 
     item.LogicOperand && index < this.props.obj.Conditions.length - 1 && 
     <span>&nbsp;{item.LogicOperand}</span>   
    } 
    &nbsp;   
    </span> 
) 

これは、あなたのHTMLにいくつかのより多くのspan秒を追加します：条件が真の場合

あなたは https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator

<span className="items-overview"> 
    {this.props.obj.items.map((item, index) => { 
     return (
      <span> 
       {item.LeftParenthesis && <b>{item.LeftParenthesis}</b>} 
       <i>{item.Description}</i> 
       {item.RightParenthesis && <b>{item.RightParenthesis}</b>} 
       {item.LogicOperand && index < this.props.obj.Conditions.length - 1 && (&nbsp;<span>{item.LogicOperand}</span>)} 
       &nbsp; 
      </span>          
     ); 
    )} 
</span>