Semantic UI React Dropdown：标题选项？答案

【问题标题】：Semantic UI React Dropdown: Header Options?Semantic UI React Dropdown：标题选项？
【发布时间】：2019-02-21 11:41:35
【问题描述】：

有没有办法在选项中获得带有标题项的选择下拉菜单？

我当然知道有这个标签：

<Dropdown.Header icon='tags' content='Filter by tag' />

但这需要整个下拉列表具有自定义下拉项，并且不适用于语义 UI 的“选择”关键字，该关键字为我做了很多下拉管理，让我提供对象数组的选项（“选项”）。

添加/声明我的选项时，我希望能够将其定义为标题项。像这样：

{
                key: id,
                value: id,
                text: name,
                content: (
                    <span>
                        {name}
                        <Label circular>{points}</Label>
                    </span>
                ),
                header: true
            }

有类似的吗？我在文档中找不到任何内容。

【问题讨论】：

标签： semantic-ui-react

【解决方案1】：

您可以使用Dropdown 并像这样操作数组：

const options = [
    {
        component:
            Dropdown.Menu,
        children:
            <Dropdown.Menu scrolling>
                <Dropdown.Header content='Filter by tag' />
                <Dropdown.Divider />
            </Dropdown.Menu>,
    },
    {
        key: id,
        text: id,
        value: name
    },

]

【讨论】：

【解决方案2】：

如果您想要选择下拉列表的外观以及使用<Dropdown.Header /> 的功能，请尝试将selection 替换为className='selection'：

<Dropdown className='selection'>
  <Dropdown.Menu>
    <Dropdown.Header content='Header' />
    <Dropdown.Item>{'Item'}</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

【讨论】：