Question

我有一个reactJS应用程序，我需要动态构建引导菜单。在我的应用程序的常规渲染中，我具有以下代码：

<div className="container">
    <nav className="navbar navbar-light bg-light">
        <a className="navbar-brand" href="#">{this.state.planName}</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
        </button>
        {this.renderMenu()}
   </nav>
</div>

这是我在{this.renderMenu（）}中拥有的代码

return (
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="nav navbar-nav">
            <li className="nav-item">
                <a className="nav-link" onClick={this.accountinformation}>Account Information</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.contributions}>Contributions</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.transfer}>Transfer</a>
            </li>
            <li class="active"><a href="/preventback">Logout</a></li>
       </ul>
    </div>
   )

这一切都很好。但是，如果仅在menuBene =“ Y”时呈现受益人菜单选项，仅在menuTransfer =“ Y”时仅呈现转移菜单选项，并且仅在menuTransaction =“ Y”时仅呈现交易历史菜单选项，我想做的事情。 / p>

是否存在允许我在渲染器中具有条件的语法？像这样：

return (
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="nav navbar-nav">
            <li className="nav-item">
                <a className="nav-link" onClick={this.accountinformation}>Account Information</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
            </li>
            <li className="nav-item">
                <a className="nav-link" onClick={this.contributions}>Contributions</a>
            </li>
            if (menuBene == "Y") {
                <li className="nav-item">
                    <a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
                </li>
             }
             if (menuTransaction == "Y") {
                <li className="nav-item">
                    <a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
                </li>
             }
             if (menuTransfer == "Y") {
                <li className="nav-item">
                    <a className="nav-link" onClick={this.transfer}>Transfer</a>
                </li>
             }
            <li class="active"><a href="/preventback">Logout</a></li>
       </ul>
    </div>
)

Answer 1

快速简洁的方法是使用内嵌pip install pandas==0.21.0语法

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

具有动态引导菜单的reactJS

1 个答案: