问题描述
我正在尝试将基于角色的下拉菜单/导航栏放入我的 React 项目中，但我无法让它显示正确的选项。目前它只是说“注册”，但它应该有消息、通知、个人资料、ScubaSchoolAccess、SiteAdminAccess 和注销。
下拉菜单也显示在页面的中间，它不会打开和关闭。具有用户属性的 json 对象位于我的 Web 控制台中，因此这不是问题。我认为切换部分的构造函数中的值有问题吗？
我是 JavaScript 的新手，并试图从带有钩子的函数中修改它。
控制台上的错误信息如下。
Warning: Failed prop type: Invalid prop `in` of type `function` supplied to `Transition`,expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `Unstable_TrapFocus`,expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(SimpleBackdrop)`,expected `boolean`.
Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(Modal)`,expected `boolean`.
Warning: Failed prop type: Invalid prop `in` of type `function` supplied to `ForwardRef(Grow)`,expected `boolean`.
NavBar.component.js
class ScubaNavbar extends Component {
constructor(props) {
super(props);
this.logout = this.logout.bind(this);
this.state = {
showUserLevelAccess: false,showSchoolLevelAccess: false,showAdminLevelAccess: false,currentUser: undefined,anchorEl: null,isMenuOpen: Boolean,};
history.listen((location) => {
props.dispatch(clearMessage());
});
}
componentDidMount() {
const user = this.props.user;
console.log(user)
if (user) {
this.setState({
currentUser: user,showUserLevelAccess: user.userRoles === 1,showSchoolLevelAccess: user.userRoles === 2,showSiteAdminLevelAccess: user.userRoles === 3,});
}
}
logout() {
this.props.dispatch(logout());
}
render() {
const {
// current user gives specific user details
currentUser,// levels give role access
showUserLevelAccess,showSchoolLevelAccess,showSiteAdminLevelAccess,} = this.state;
const { classes } = this.props;
const handleProfileMenuOpen =() => {
this.setState({anchorEl: this.currentTarget,open: Boolean(this.currentTarget)});
};
const handleMenuClose = () => {
this.setState({anchorEl: this.currentTarget === null});
};
const menuId = 'dark-search-account-menu';
const renderMenu = (
<Menu
anchorEl={this.state.anchorEl}
anchorOrigin={{vertical: 'top',horizontal: 'right'}}
id={menuId}
keepMounted
transformOrigin={{vertical: 'top',horizontal: 'right'}}
open={this.state.isMenuOpen}
onClose={handleMenuClose}>
{showUserLevelAccess && (
<MenuItem>
<IconButton aria-label="show 4 new mails" color="inherit">
<Badge badgeContent={4} color="secondary">
<MailIcon/>
</Badge>
</IconButton>
<p>Messages</p>
</MenuItem>
)}
{showUserLevelAccess && (
<MenuItem>
<IconButton aria-label="show 11 new notifications" color="inherit">
<Badge badgeContent={11} color="secondary">
<NotificationsIcon/>
</Badge>
</IconButton>
<p>Notifications</p>
</MenuItem>
)}
{showUserLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Profile</p>
</MenuItem>
)}
{showSchoolLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Scuba School Access</p>
</MenuItem>
)}
{showSiteAdminLevelAccess && (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit"
>
<AccountCircle/>
</IconButton>
<p>Site Admin Access</p>
</MenuItem>
)}
{currentUser ? (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit">
<Link href="/login" className="nav-link" onClick={this.logout}/>
<ExitToAppIcon/>
</IconButton>
<p>logout</p>
</MenuItem>
) : (
<MenuItem onClick={handleProfileMenuOpen}>
<IconButton
aria-label="account of current user"
aria-controls="primary-search-account-menu"
aria-haspopup="true"
color="inherit">
<Link href="/registration" className="nav-link"/>
<AccountCircle/>
</IconButton>
<p>SignUp</p>
</MenuItem>
)}
</Menu>
);
return (
<div className={classes.grow}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon/>
</IconButton>
<Typography className={classes.title} variant="h6" Nowrap>
Sustainable Scuba
</Typography>
<div className={classes.grow}/>
<div className={classes.sectionDesktop}>
<IconButton
edge="end"
aria-label="account of current user"
aria-controls={menuId}
aria-haspopup="true"
onClick={handleProfileMenuOpen}
color="inherit"
>
<AccountCircle/>
</IconButton>
</div>
<div className={classes.sectionMobile}>
<IconButton
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="inherit"
>
<MoreIcon/>
</IconButton>
</div>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
</div>
);
}
}
export default withStyles(useStyles)(ScubaNavbar);
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）