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

Question

我想构建一个小下拉菜单(我使用的是semantic-ui-react)。但就我而言，我需要一个取决于此菜单部分的条件。

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

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>