1

我想建立一个小下拉菜单（我正在使用语义-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>
    )
}
4

1 回答 1

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>

于 2017-03-08T19:32:38.590 回答