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

Question

我正在与reactjs合作，并使用semanticui进行reactjs造型前端，

是否可以从下拉组件的对象的选项数组中指定标头或划分？

我从文档中得到的印象尚不支持。

Answer 1

我通过更改为"选项数组中的对象"以具有更多属性（允许您自定义内容）来解决此问题：

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

这可能不是实现我想要的理想方式，因为我必须将禁用设置为true（我不希望它是可选的选项），这意味着它采用了灰色的"残疾"风格。我试图通过为标头的颜色指定颜色来对抗这一点，从而导致蓝绿色颜色应用的残疾样式，但现在不完美，但现在可以做到。

Answer 2

另一个解决方法是通过地图数组进行：

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>
);

Answer 3

M先生的解决方案是天才。并且可以通过对他的一些修改进行一些修改：

function FragmentWithoutWarning({key, children}) {
  // to get rid of the warning:
  // "React.Fragment can only have `key` and `children` props."
  return <React.Fragment key={key}>{children}</React.Fragment>;
}
// then just:
{
  as: FragmentWithoutWarning,
  content: <Header content="YouGov Filters" color="teal" size="small" />
}

由于<React.Fragment />无法捕获任何事件，因此您甚至不必禁用该项目。