reactjs - 在 React 中将链接放入 StyledMenuItem

Question

我想放Link，这样我就可以导航到其他页面做出反应。为什么这不是导航

代码

  <StyledMenu
  anchorEl={settingsMenu}
  keepMounted
  open={Boolean(settingsMenu)}
  onClose={handleClose}>

  <StyledMenuItem>
    <ListItemIcon component={Link} to={`/accounts`}>
      <PersonIcon />
    </ListItemIcon>
    <ListItemText primary="accounts" />
  </StyledMenuItem>
  <StyledMenuItem component={Link} to={`/orders`}>
    <ListItemIcon>
      <OrderIcon />
    </ListItemIcon>
    <ListItemText primary="Orders" />
  </StyledMenuItem>
</StyledMenu>;

Answer 1

假设<StyledMenuItem>是您的自定义组件，您可以通过将整个 JSX 包装在componentprop 中轻松地做到这一点。对于传递给它的其他道具（例如to），只需解构它们并将它们作为道具放置到新的包装器component中。

import React, { Component } from "react";
export default class StyledMenuItem extends Component {
    render() {

        // simply checks to see if a component prop is passed
        let WrapperComponent = this.props.component;
        if (WrapperComponent === undefined) {
            WrapperComponent = React.Fragment;
        }

        return (
            <WrapperComponent {...this.props}>
                {this.props.children}
            </WrapperComponent>
        );
    }
}

这以某种方式模仿了Material UI MenuItem的行为，就像我之前在评论中所写的那样。