如何在 select 的 react.js 語義 ui 中添加標簽

Question

我正在研究反應選擇選項模式，我被困在代碼中，我想使用 react-semantic-ui 進行設計，我想要 select 或帶有描述的 div。

代碼：

  let permissions = [
      { key: 1, value: 1, text: 'Owner',tags:'Can fully configure and edit anything, manage workspaces and billing' },
      { key: 2, value: 2, text: 'Creator',tags:'Can completely configure a stack' },
      { key: 3, value: 3, text: 'Editor',tags:'Can only edit rows, cannot configure tables or columns' },
      { key: 4, value: 4, text: 'Commenter',tags:'Can only comment on rows' },
      { key: 5, value: 5, text: 'Read only',tags:'Cannot edit anything, only read' }
    ];
console.log(permissions);

我想顯示值，帶標簽的文本，

let permissions = [
          { key: 1, value: 1, text: 'Owner',tags:'Can fully configure and edit anything, manage workspaces and billing' },
          { key: 2, value: 2, text: 'Creator',tags:'Can completely configure a stack' },
          { key: 3, value: 3, text: 'Editor',tags:'Can only edit rows, cannot configure tables or columns' },
          { key: 4, value: 4, text: 'Commenter',tags:'Can only comment on rows' },
          { key: 5, value: 5, text: 'Read only',tags:'Cannot edit anything, only read' }
        ];

我想要像這張圖片的 output

Answer 1

您在標簽中添加了字符串值，而不是使用content屬性並指定要呈現的組件。 像Header將根據您的要求完美契合。 在這里，我已經映射了您的權限數組，但是您可以使用組件屬性而不是標簽來更新現有的權限數組。

const options = permissions.map((x) => ({
  key: x.key,
  text: x.text,
  value: x.key,
  content: <Header content={x.text} subheader={x.tags} />
}));

const DropdownExampleItemContent = () => (
  <Dropdown selection fluid options={options} placeholder="Choose an option" />
);

這是它的演示 - https://codesandbox.io/s/semantic-ui-example-forked-y6zls