javascript - 在渲染方法中 react 组织链接

Question

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

如果用户是 super 管理员(可以这么说)，我想同时显示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。如何呈现 super 用户的用户链接和 super 管理员链接？

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>