反应渲染方法中的组织链接

Question

我找到了一个教程 ，其中根据render()方法中创建的const字段显示导航栏链接。 虽然代码效果很好，但我正在尝试做更多的事情。

如果用户是超级管理员 （可以说），那么我想同时显示superAdminLinks和userLinks 。 我尝试了多种方法，但无法正确处理。 任何帮助，将不胜感激。 谢谢！

我的render()代码段如下所示

render() {


            const isSuperAdmin = user.user_role === "SUPER_ADMIN";


            const userLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>UserLink1</li>
                    <li>UserLink2</li>
                </ul>
            )

            const superAdminLeftMenu = (
                <ul className="nav nav-sidebar">
                    <li>SuperAdminLink1</li>
                    <li><SuperAdminLink2</li>
                </ul>
            )

            return (
                    <header>
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-sm-3 col-md-2 sidebar">
                                 { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
                                </div>
                            </div>
                        </div>
                   </header>
            );
    }

如果用户是SuperAdmin，则以上代码仅呈现S​​uperAdminLinks。 如何呈现SuperUser的用户和超级管理员链接？

Answer 1

您可以使用React.Fragment ：

 const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const userLeftMenu = ( <React.Fragment> <li>UserLink1</li> <li>UserLink2</li> </React.Fragment> ); const superAdminLeftMenu = ( <React.Fragment> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> {userLeftMenu} </React.Fragment> ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> <ul className="nav nav-sidebar"> {isSuperAdmin ? superAdminLeftMenu : userLeftMenu} </ul> </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root")); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> 

Answer 2

<div className="col-sm-3 col-md-2 sidebar">
   { isSuperAdmin ? superAdminLeftMenu : userLeftMenu  }
   { isSuperAdmin && userLeftMenu  }
</div>

Answer 3

return (
   <header>
     <div className="container-fluid">
       <div className="row">
         <div className="col-sm-3 col-md-2 sidebar">
           { isSuperAdmin && superAdminLeftMenu }
           { isSuperAdmin && userLeftMenu }   
         </div>
       </div>
     </div>
   </header>
)

Answer 4

如果不是这样， UserLeftMenu总是在SuperUserLeftMenu ，那么我们可以使用一种更好的方法来做到这一点。 这种形式使您可以在if语句中返回所需的所有组件：

 const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const UserLeftMenu = () => ( <div> <li>UserLink1</li> <li>UserLink2</li> </div> ); const SuperAdminLeftMenu = () => ( <div> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> </div> ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> { isSuperAdmin ? <div> <SuperAdminLeftMenu/> <UserLeftMenu/> </div> /* Return 'SuperAdminLeftMenu' and 'UserLeftMenu' components. If you returns components of this form, you can return all component you want inside same if */ : <UserLeftMenu /> } </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root")); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> 

---

编辑1：

如果UserLeftMenu始终位于SuperUserLeftMenu ，则可以执行以下操作：

 const { render } = ReactDOM; const role = "SUPER_ADMIN"; const App = () => { const isSuperAdmin = role === "SUPER_ADMIN"; const UserLeftMenu = () => ( <div> <li>UserLink1</li> <li>UserLink2</li> </div> ); const SuperAdminLeftMenu = () => ( <div> <li>SuperAdminLink1</li> <li>SuperAdminLink2</li> { <UserLeftMenu/> } </div> // Include 'UserLeftMenu' inside 'SuperAdminLeftMenu' ); return ( <header> <div className="container-fluid"> <div className="row"> <div className="col-sm-3 col-md-2 sidebar"> { isSuperAdmin ? <SuperAdminLeftMenu/> // Return 'SuperAdminLeftMenu' component : <UserLeftMenu /> } </div> </div> </div> </header> ); }; render(<App />, document.getElementById("root")); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>