在多选材质 UI 上响应渲染同级

Question

这是我的问题：我需要使用材质 UI 在 React 上创建多个选择（带有复选框），如下图所示：

我的数据位于如下所示的数组中

data = [
  {
    id: 199,
    name: "Argentina",
    state: [
      { name: "Buenos Aires", id: 1 },
      { name: "Cordoba", id: 2 },
      { name: "Chaco", id: 2 }
    ]
  },
  {
    id: 200,
    name: "USA",
    state: [
      { name: "California", id: 4 },
      { name: "Florida", id: 5 },
      { name: "Texas", id: 6 }
    ]
  }
]

完美的。一切似乎都必须做2个嵌套地图，没有什么特别的。同时，我尝试这样做：

<InputLabel htmlFor="grouped-select">Grouping</InputLabel>
<Select
  defaultValue={[]}
  id="grouped-select"
  onChange={handleChange}
  multiple
>
  <MenuItem value="">
    <Checkbox />
    <em>All</em>
  </MenuItem>
  {data.map(country => (
    <>
      <ListSubheader key={country.id}>{country.name}</ListSubheader>
      {country.state.map(state => (
        <MenuItem key={state.id} value={state.id}>
          <Checkbox />
          {state.name}
        </MenuItem>
      ))}
    </>
  ))}
</Select>

这可以很好地呈现选择，使其看起来很漂亮。但我的问题是（显然）材料不接受<></>select 内的 React.Fragment ( ) 。同时，我无法生成 Material UI 在循环数组的文档中指定的结构：

<ListSubheader>Parent 1</ListSubHeader>
<MenuItem key={state.id} value={state.id}>Child1</MenuItem>
<MenuItem key={state.id} value={state.id}>Child2</MenuItem>
<MenuItem key={state.id} value={state.id}>Child...n</MenuItem>

<ListSubheader>Parent 2</ListSubHeader>
<MenuItem key={state.id} value={state.id}>Child</MenuItem>
<MenuItem key={state.id} value={state.id}>Child...n</MenuItem>

如果我放置一个<div>或其他元素而不是<></>，则onchange事件将停止工作。

我还尝试使用数组进行渲染，但没有得到好的结果，因为第二个兄弟不是 jsx，但我必须循环遍历数组。

{data.map(country => [
    <ListSubheader key={country.id}>{country.name}</ListSubheader>
    {country.state.map(state => (
      <MenuItem key={state.id} value={state.id}>
        <Checkbox />
        {state.name}
      </MenuItem>
    ))}
  ])}

我被阻止了，我不知道如何解决。我想到了一个子组件，但在渲染它时我会遇到同样的问题。

有办法解决吗？

我留下带有示例片段的链接：https ://codesandbox.io/s/material-demo-h77i8

非常感谢。

Answer 1

您可以在此处检查此代码和框。

从这个答案中您可以注意到，您始终可以创建元素而无需片段。因为片段只是数组的包装器。因为，材料不需要碎片。您可以使用纯数组来渲染元素，而不是将其包装成片段。

function makeItems(data) {
  const items = [];
  for (let country of data) {
    items.push(<ListSubheader key={country.id}>{country.name}</ListSubheader>);
    for (let state of country.state) {
      items.push(
        <MenuItem key={state.id} value={state.id}>
          <Checkbox />
          {state.name}
        </MenuItem>
      );
    }
  }
  return items;
}

您可以看看我如何使用另一个函数推入 JavaScript 数组，然后将它们渲染到树中。