如何動態構建包含 header 的語義 UI 下拉列表？

Question

我有下拉選項

const options = [
    { key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' },
    { key: '2', text: 'Example 2', value: 'Example 2', type:'XYZ' },
    { key: '3', text: 'Example 3', value: 'Example 3', type:'ABC' },
    { key: '4', text: 'Example 4', value: 'Example 4', type:'XYZ' },
  ];

我想動態構建語義-ui 下拉列表，以便每個下拉列表值都位於它們各自的“類型”值之下。

在這種情況下，示例 1、示例 3 將位於“ABC”Header 標簽下，示例 2、示例 4 將位於“XYZ”Header 標簽下。

ABC
  Example 2
  Example 4
XYZ
  Example 2
  Example 4

Answer 1

我試圖通過以下方式解決它。 首先獲取選項數組的所有不同類別。

categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc]  ,[]).slice()

然后我需要 map 所有可能的 json 到它各自的類型

categories.map(x=>{
  resOption[x]= options.filter(j => j.type===x).slice()
})

我的完整代碼在這里

 var resOption = {}
  var categories =[]

categories = options.reduce((acc,curr)=> !acc.includes(curr.type)? [...acc,curr.type]: [...acc]  ,[]).slice()

categories.map(x=>{
  resOption[x]= options.filter(j => j.type===x).slice()
})

return(
  <Dropdown  selection >
    <Dropdown.Menu>
      {
        Object.keys(resOption).map((type)=>(
          <React.Fragment>
          <Dropdown.Header content={type} style={{color:"#5aa7e6"}} />
            {
              resOption[type].map((option)=>(
                <Dropdown.Item text={option.text} value={option.value}  onClick={onChange} />
              ))
            }
          <Dropdown.Divider />
          </React.Fragment>
        ))
      }
    </Dropdown.Menu>
  </Dropdown>
)