セマンティックuiドロップダウンメニューコンポーネント内の反応コンポーネントの条件の使用方法

Question

（私はsemantic-ui-reactを使用しています）少しドロップダウンメニューを作成したいと思います。しかし私の場合、このメニューの一部に応じて条件が必要です。

これは私が思いついたものですが、ラップする必要があるため動作しません。だから、ifThisIsTrueが本当の値を持っていれば、ヘッダ、ディバイダ、アイテムを持つ2つのメニューサブブロックを得るために、このドロップダウンメニューを正しい方法で作成する必要がありますか？

render() { 
    const ifThisIsTrue = true 
    return (
     <Dropdown icon='cogs' className='icon settings'> 
      <Dropdown.Menu> 
       { 
        ifThisIsTrue && 
         <Dropdown.Header icon='cogs' content='Label' /> 
         <Dropdown.Divider /> 
         <Dropdown.Item value='default'>Standard</Dropdown.Item> 
         <Dropdown.Item value='something'>Something</Dropdown.Item> 
         <Dropdown.Item value='else'>Else</Dropdown.Item> 
       } 

       <Dropdown.Header icon='cogs' content='Edit' /> 
       <Dropdown.Divider /> 
       <Dropdown.Item>Delete</Dropdown.Item> 
       <Dropdown.Item>Edit</Dropdown.Item> 
      </Dropdown.Menu> 
     </Dropdown> 
    ) 
} 

Answer 1

条件付き要素を配列にラップします（もちろんコンマで区切ります）。各項目にkeyプロパティを付ける必要があります。リアクションは残りの部分を処理します。

const Component = ({ifThisIsTrue}) => (
 
    <ul> 
 
    <li>One</li> 
 
    { ifThisIsTrue && [ 
 
     <li key="2">Two</li>, 
 
     <li key="3">Three</li> 
 
     ] 
 
    } 
 
    </ul> 
 
); 
 

 
ReactDOM.render(<Component ifThisIsTrue={Math.random() > 0.5}/>, document.querySelector('div'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div></div>