如何在 react.js 语义 ui 中添加标签 select

Question

我正在研究 React select-option modal，我被困在代码中，我想使用 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' }
        ];

我想要这样的输出

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

如何在 react.js 语义 ui 中添加标签 select

how to add tags in react.js semantic ui in select

javascript

reactjs

semantic-ui