在 React 中将菜单项附加到 Material-UI 选择输入

如何解决在 React 中将菜单项附加到 Material-UI 选择输入

所以我对 react 甚至 javascript 都不擅长，但我想做的是采用这个 react 元素：

  const selectItem = (
       <Select defaultValue="" id="type-select" label="Type">
        <MenuItem value="">
        <em>None</em>
      </MenuItem>
      </Select>
    )

并从这里附加子标题项和菜单项：

  Object.keys(greatSet).forEach(o => {
    let subHeader = React.createElement('ListSubHeader',{class:'grouped-stuff'},o)
    selectItem.appendChild(subHeader)
    greatSet[o].forEach(option => {
      let menuItem = React.createElement('MenuItem',{value: option.id},option.name)
      selectItem.appendChild(menuItem)
    })
  })

greatSet 一个带有键的对象：对象数组，如果不清楚的话。

我想要的是类似于这个：

 <Select defaultValue="" id="grouped-select">
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <ListSubheader>Category 1</ListSubheader>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
  <ListSubheader>Category 2</ListSubheader>
    <MenuItem value={3}>Option 3</MenuItem>
    <MenuItem value={4}>Option 4</MenuItem>
</Select>

最好的方法是什么？