javascript - 在多选 Material UI 上 react 渲染同级

Question

这是我的问题:
我需要使用 Material 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个嵌套 map ，没什么特别的。同时，我试试这个:

<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>

这可以很好地呈现选择，使它看起来不错。但我的问题是(显然) Material 在选择中不接受 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>或其他元素而不是 <></> , 改变 事件停止工作。

我也尝试对数组使用渲染，但由于第二个兄弟不是 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

您可以检查此代码框 here .

您可以从这个答案中注意到，您始终可以在不需要片段的情况下创建元素。由于片段只是数组的包装器。因为， Material 不希望其中有碎片。您可以使用纯数组来呈现您的元素，而不是将其包装成片段。

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 数组，然后将它们渲染到树上的。