javascript - 如果使用 react 满足某些条件，则显示下拉列表

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 语句时，屏幕上会出现“我在”警告，但它不会呈现我的下拉列表，我不知道为什么。

这是我的渲染:

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>
    }
})