从数据动态生成 Material UI Select 组件内的分组

Question

我需要动态生成 Select 组件的分组，并希望以受控方式使用该组件。（与不受控制相反。）

\n

此代码片段在没有<ListSubheader ...>组件的情况下也可以正常工作，但是我需要它，并且组选择的 Material UI Docs 示例显示使用<ListSubheader ...>显示了以这种方式

\n

  <Select fullWidth value={selectedPlan} onChange={handleChange}>\n        {products?.map(p => (\n          <>\n            <ListSubheader>{p.name}</ListSubheader>\n            {p.plans.map(pl => (\n              <MenuItem key={pl.id} value={pl}>\n                {pl.id} {pl.name} {pl.type} {pl.price}\n              </MenuItem>\n            ))}\n          </>\n        ))}\n      </Select>\n

\n

然而，如果我们收到错误消息，似乎不可能动态生成它

\n

\n

Menu 组件不接受 Fragment 作为子组件。考虑提供一个数组。

\n

\n

根据Material UI文档，

\n

\n

\xe2\x9a\xa0\xef\xb8\x8f当 native 为 false 时，MenuItem 元素必须是直接后代。

\n

\n

如何以编程方式在组件中生成分组。

\n

我创建了一个代码沙箱，可以重现这个问题

\n

Answer 1

这是编辑后的沙箱。

是的，问题是你把它包裹在一个碎片中。如果将它包装在 a 中，<div>它可以工作，但返回undefinedforevent.target.value因为<MenuItem/>它不是 的直接子级<Select/>。

PS我把它提取到一个函数中只是让它更清楚。这与修复无关。