在 React 中将 Link 放入 StyledMenuItem

Question

我想放 Link 这样我就可以在 React 中导航到其他页面。为什么这不是导航

代码

  <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 包装在 component 属性中来轻松地做到这一点。对于传递给它的其他道具（例如，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 的行为，就像我之前在评论中写的那样。

在 React 中将 Link 放入 StyledMenuItem

Put Link in StyledMenuItem in React

reactjs

react-hooks

react-link