Могу ли я включить <Hidden>пунктов меню в компонент Material UI <Menu>?

Question

У меня есть меню в AppBar, и я бы хотел, чтобы определенные элементы отображались как кнопки на AppBar, когда есть место, и как пункты меню в существующем меню, когда его нет. То есть меню присутствует всегда и в нем всегда есть пункты. Я бы просто хотел, чтобы некоторые функции были кнопками AppBar или элементами меню в зависимости от размера экрана.

Вот упрощенный пример:

<Menu
  id="settings-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <Hidden lgUp>
    <MenuItem onClick={logout}>
      <ListItemIcon><ExitToAppIcon /></ListItemIcon>
      <ListItemText primary="Hidden log out" />
    </MenuItem>
  </Hidden>
  <MenuItem onClick={logout}>
    <ListItemIcon><ExitToAppIcon /></ListItemIcon>
    <ListItemText primary="Log out" />
  </MenuItem>
</Menu>

Когда я открываю меню, я получаю сообщение об ошибке сообщение в консоли:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(Menu)`.
    in Hidden (at NavBar.js:76)
    in ul (created by ForwardRef(List))
    in ForwardRef(List) (created by WithStyles(ForwardRef(List)))
    in WithStyles(ForwardRef(List)) (created by ForwardRef(MenuList))
    in ForwardRef(MenuList) (created by ForwardRef(Menu))
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Popover))
    in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
    in WithStyles(ForwardRef(Popover)) (created by ForwardRef(Menu))
    in ForwardRef(Menu) (created by WithStyles(ForwardRef(Menu)))
    in WithStyles(ForwardRef(Menu)) (at NavBar.js:70)
    in div (at NavBar.js:50)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (at NavBar.js:48)
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar)) (at NavBar.js:47)
    in Header (at Layout.js:32)
    in div (at Layout.js:31)
    in div (at Layout.js:29)
    in Layout (at App.js:18)
    in Unknown (at src/index.js:39)
    in Router (at src/index.js:38)
    in ThemeProvider (at src/index.js:37)
    in Provider (at src/index.js:36)

Допускаются ли компоненты <Hidden> в <Menu>? Если нет, то как лучше всего разрешить отображение пунктов меню в зависимости от размера экрана?

Answer 1

Как указывает ошибка, Hidden не поддерживает получение ссылки и это требуется для пунктов меню.

Однако вы можете добиться того же, используя Box:

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Box from "@material-ui/core/Box";

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Always Displayed</MenuItem>
        <Box clone display={{ sm: "none" }}>
          <MenuItem onClick={handleClose}>Profile</MenuItem>
        </Box>
        <Box clone display={{ lg: "none" }}>
          <MenuItem onClick={handleClose}>My account</MenuItem>
        </Box>
        <Box clone display={{ md: "none" }}>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </Box>
      </Menu>
    </div>
  );
}

Unfortunately, using Box can be brittle in a case like this where it is overriding a style set by the wrapped component, since import order affects which one wins (see further discussion here: Box vs className vs style для вертикального интервала в UI материала ).

Другой вариант - использовать withStyles для создания версий MenuItem, которые скрываются в конкретная точка останова:

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { withStyles } from "@material-ui/core/styles";

const MenuItemHiddenLgUp = withStyles(theme => ({
  root: {
    [theme.breakpoints.up("lg")]: {
      display: "none"
    }
  }
}))(MenuItem);

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Always Displayed</MenuItem>
        <MenuItemHiddenLgUp onClick={handleClose}>Profile</MenuItemHiddenLgUp>
        <MenuItemHiddenLgUp onClick={handleClose}>
          My account
        </MenuItemHiddenLgUp>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

Documentation:

• https://material-ui.com/components/box/#box
• https://material-ui.com/system/display/#hiding -элементы