Question

我找到了一个tutorial，根据const方法中创建的render()字段显示导航栏链接。虽然代码很有效，但我还是想做更多的事情。

如果用户超级管理员（比方说），我想同时显示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时呈现SuperAdminLinks。如何为SuperUser呈现用户和超级管理员链接？

Answer 1

您可以使用React.Fragment：

＆＃13;

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"));

＆＃13;

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

＆＃13;

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>

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

4 个答案: