如何在語義UI下拉菜單組件中使用反應組件中的條件

我想構建一個小小的下拉菜單（我正在使用semantic-ui-react）。但在我的情況下，我需要一個條件取決於這個菜單的一部分。如何在語義UI下拉菜單組件中使用反應組件中的條件

這是我想出來的，但它不會工作，因爲它將不得不被包裝。那麼如果ifThisIsTrue具有真正的價值，我應該如何以正確的方式創建這個下拉菜單來獲得帶有標題，分隔符和項目的兩個菜單子塊？

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

來源

2017-03-08 user3142695

將條件元素包裝在數組中（當然，用逗號分隔）。你需要給每個物品key財產。 React會處理剩下的事情。

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>

來源

2017-03-08 19:32:38

不知道這一點。涼。但是，我必須添加鍵，對吧？ – user3142695

@ user3142695是的，你是對的。接得好。（我忘了SO片段默認使用'react.min.js'，所以它沒有記錄警告。）我編輯了我的答案。 –

如何在語義UI下拉菜單組件中使用反應組件中的條件

回答

相關問題