我可以在 Semantic UI React 的下拉組件的選項數組中指定分隔符或標題嗎？

Question

我正在使用 ReactJS 並使用 SemanticUI for ReactJS 來設計前端，

是否可以從下拉組件的對象選項數組中指定 標題或分隔符？

我從文檔中得到的印象是這還不支持。

Answer 1

我通過將選項數組中的對象更改為具有更多屬性（允許您自定義內容）來解決此問題：

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

這可能不是實現我想要的理想方式，因為我必須將 disabled 設置為 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

B先生的解決方案是天才。 對他的稍作修改，它可以更干凈：

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 />無法捕獲任何事件，因此您甚至不必禁用該項目。