Question

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

这是我提出的，但它不会起作用，因为它必须被包裹。那么如果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>
    )
}

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组件中的条件

1 个答案: