Question

如果要满足某些条件，我想显示我的下拉列表：

let managePermissionButton = () => {
    window.alert("->-> " + props.user.name)
    props.user.permissions.map((permission) => {
        if (permission.name === permissions) {
            window.alert("Im in")
            return <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Manage Permissions
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item"><Link className='nav-link' to='/addPermission'>Manage Permissions From Group</Link></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item"><Link className='nav-link' to='/excludePermission'>Exclude Permission From User</Link></a>
                </div>
            </li>
        }
    })
}

当我的代码输入到if语句中时，“ Im in”警报就会出现在屏幕上，但不会显示我的下拉菜单，我也不知道为什么。

这是我的渲染图

return (
    <div>
        <ul>
            <nav className="navbar navbar-expand-lg ">
                <ul className="navbar-nav mr-auto">
                    <li className='nav-item'>
                        <Link className='nav-link' to='/home'>Home</Link>
                    </li>
                    <li className='nav-item'>
                        <Link className='nav-link' to='/customers'>Customers</Link>
                    </li>
                    {managePermissionButton()}
                </ul>
                <button type="button" onClick={() => onClick(props)} class="btn btn-default btn-circle">Logout</button>{}
            </nav>
        </ul>
    </div>

);

Answer 1

在props.user.permissions.map（（permission）

之前添加一个return语句

let managePermissionButton = () => {
window.alert("->-> " + props.user.name)
return props.user.permissions.map((permission) => {
    if (permission.name === permissions) {
        window.alert("Im in")
        return <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Manage Permissions
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item"><Link className='nav-link' to='/addPermission'>Manage Permissions From Group</Link></a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item"><Link className='nav-link' to='/excludePermission'>Exclude Permission From User</Link></a>
            </div>
        </li>
    }
})

}

如果使用react

1 个答案: