Javascript 如何在select中的react.js语义界面中添加标记

我正在处理react-select选项模式，我被代码困住了，我想使用react语义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' }
        ];

我希望像这样的图像输出

---

您在标记中添加了字符串值，您可以使用content属性并指定要渲染的组件。如标题将根据您的要求完美匹配。在这里，我映射了您的权限数组，但是您可以使用组件属性而不是标记更新现有的权限数组

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

const options=permissions.map（（x）=>({
key:x.key，
text:x.text，
值：x.key，
内容：
}));
常量DropdownExampleItemContent=（）=>(
);

这是它的演示-

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