将链接放入React中的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的行为，就像我之前在评论中写的那样。