MUI：菜单组件不接受 Fragment 作为子组件。考虑提供一个数组

Question

我用过MUI Menu一些MenuItem。但我不断收到错误：MUI: The Menu component doesn't accept a Fragment as a child. Consider providing an array instead. 。任何人都可以用简单的文字解释这个错误吗？我在网上看到了很多类似的解释，但我觉得没有一个是清楚的。我看过第一个问答，但没有向我解释太多。我从 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 中，那么您将看到错误。

但你的代码看起来有效。

该代码片段不正确并抛出错误：

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