reactjs - 如何设置 MenuItem 在里面

Question

我是 Material-UI 的新手。

我想做一些弹出窗口并在MenuMenuItemMenu Demo中看到和。他们是完美的，除了一件事。我希望菜单项是link。

默认情况下MenuItem是li, （我认为）因为Menu是ul. 但是通过设置或来建立项目链接并不难。但在这种情况下，他们输了。component="a"component={RouterLink}li

对于类似屏幕阅读器的程序，我听说使用适当的Html 标签很重要。（它被称为语义网。对吧？）

从这个角度来看，我想将菜单项放在a里面li。

--试用--

<MenuItem>
  <a>link text</a>
</MenuItem>

a在里面li。但它看起来与下面的案例不同。

<MenuItem component="a" href="/">
  link text
</MenuItem>

然后，我尝试

<MenuItem>
  <a style={{all: "inherit"}}>
    link text
  </a>
</MenuItem>

看起来很满意，但是点击后颜色会发生变化，（我认为）因为a:visited { color: ...; }不是继承的。

最后我尝试了

<li>
  <MenuItem component="a" href"/">
    link text
  </MenuItem>
</li>

是的。它解决了所有问题。但是，如果我忘记添加li怎么办？
我的菜单包含许多项目。其中一些是链接，而另一些则不是。那么我应该li通过仅区分链接的情况来直接添加吗？

--问题--
我的解决方案是最好的吗？你呢？请分享你的方式。

Answer 1

语义上，MenuItem更适合，li因为它代表列表中的一个项目。props的component默认值毕竟MenuItem是。'li'所以我会去：

<MenuItem>
  <a style={{all: "inherit"}}>
    link text
  </a>
</MenuItem>

但是，如果我忘记加 li 怎么办？

这是使用 React 的一个原因，您可以通过创建另一个组件并重用它来轻松地删除部分组件的重复项：

const useStyles = makeStyles((theme) => ({
  root: {
    "& a:visited": {
      color: theme.palette.primary.main
    }
  }
}));

function MenuItemLink({ children, href, onClick }) {
  const classes = useStyles();
  return (
    <MenuItem onClick={onClick} className={classes.root}>
      <a href={href}>{children}</a>
    </MenuItem>
  );
}

<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItemLink href="/" onClick={handleClose}>
    Profile
  </MenuItemLink>
  <MenuItemLink href="/" onClick={handleClose}>
    My account
  </MenuItemLink>
  <MenuItemLink href="/" onClick={handleClose}>
    Logout
  </MenuItemLink>
</Menu>

现场演示