我可以在语义UI React的下拉组件的选项数组中指定分隔符或标题吗？

Question

我正在使用ReactJS并使用Semantic UI为ReactJS设计前端样式，

是否可以从下拉组件的options对象数组中指定header或divider？

我从文档中得到的结论是，目前还不支持。

Answer 1

我通过在options数组中更改为object来获得更多属性（允许您自定义内容）来解决这个问题：

        {
            text: "YouGov Filters",
            value: "yougov-header",
            content: <Header content="YouGov Filters" color="teal" size="small" />,
            disabled: true
        },

它可能不是实现我想要的理想方式，因为我必须将disabled设置为true（我不希望它是一个可选择的选项），这意味着它采用了灰色的'禁用'样式。我试图通过指定标题的颜色来解决这个问题，导致禁用的样式应用于蓝绿色，但并不完美，但它现在可以做到。

Answer 2

另一种解决方法是通过map数组来完成：

const options = [
    {
        text: "note",
        icon: 'sticky note outline',
        description: 'test',
    },
    {
        divider: true
    },
    {
        text: "task",
        icon: 'calendar check outline',
        description: 'test',
    },

];

return (
    <Dropdown className='multicontent__button' text='add new' button>
        <Dropdown.Menu>
            <Dropdown.Header icon='tags' content='Tag Label' />
            {options.map((option, i) => {
                if (option.divider === true) return (<Dropdown.Divider key={i}/>);
                return (
                    <Dropdown.Item
                        key={i}
                        text={option.text}
                        icon={option.icon}
                        description={option.description}
                        action={option.action}
                        onClick={this.handleOption}
                    />
                );
            })}
        </Dropdown.Menu>
    </Dropdown>
);