MUI：菜单组件不接受片段作为子级。考虑改为提供数组

Question

我用MUIMenu和一些MenuItem。但我一直得到错误:MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead.。谁能用简单的文字解释一下这个错误?我在网上看到过很多类似的解释，但没有一个对我来说很清楚。我看到了第一个Q&A，但没有向我解释太多。我从MUI的网页上取了这个简单的例子。但还是会出现错误。在类似的情况下如何解决?

我没有任何数组可以处理。我的每一个MenuItem都是定制的。

const DataMenu = ({ anchor, onClick, onClose }: Props) => (
<Menu
id="data-menu"
anchorEl={anchor}
open={Boolean(anchor)}
onClose={onClose}
>
<MenuItem onClick={onClick}>
<ListItemIcon>
<Db1 />
</ListItemIcon>
<Typography>Data 1</Typography>
</MenuItem>
<MenuItem onClick={onClose}>
<ListItemIcon>
<Db2 />
</ListItemIcon>
<Typography>Data 2</Typography>
</MenuItem>
</Menu>
);
export default DataMenu;

Answer 1

我认为源代码解释得更好- https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Menu/Menu.js#L134

有检查isFragment(child)。这意味着如果你的子节点被Fragment包裹，那么你就会看到这个错误。

但是你的代码看起来是有效的。

这个代码片段是NOT然后抛出错误:

<Menu>
<>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</>
</Menu>

这个代码片段是可以的:

<Menu>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>