如何在语义 ui 下拉菜单组件中的 React 组件中使用条件

Question

我想建立一个小的下拉菜单（我正在使用 semantic-ui-react）。但就我而言，我需要一个取决于此菜单部分的条件。

这是我想出来的，但它行不通，因为它必须被包裹起来。那么，如果 ifThisIsTrue 具有真实值，我应该如何以正确的方式创建此下拉菜单以获得带有 header、分隔符和项目的两个菜单子块？

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 属性。 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>

如何在语义 ui 下拉菜单组件中的 React 组件中使用条件

How to use a condition in react component within semantic ui dropdown menu component

javascript

reactjs

semantic-ui-react