html - 如何在reactjs中使用相同的导航栏来完成两个导航栏的工作？

Question

我必须创建一个管理门户，其中有两个主页，因此我需要两个具有不同选项和不同链接的导航栏。

但我想做的是，如果我们登录到另一个页面，则使用相同的导航栏与其他人一样工作。

function OrgAdminNavbar(): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        <li>
          <a href="/orghome">Home</a>
        </li>
        <li>
          <a href="/orgmember">Member</a>
        </li>
        <li>
          <a href="/">LogOut</a>
        </li>
      </div>
    </>
  );
}

export default OrgAdminNavbar;

这是我的第一个导航栏

function SuperAdminNavbar(): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        <li>
          <a href="/">Home</a>
        </li>
        <li>
          <a href="/supermember">People</a>
        </li>
        <li>
          <a href="/superorg">Organization</a>
        </li>
        <li>
          <a href="/">LogOut</a>
        </li>
      </div>
    </>
  );
}

export default SuperAdminNavbar;

这是我的第二个导航栏，基本上我想合并它。

Answer 1

您可以将名称和 URL 数组传递给通用导航栏组件:

interface NavbarProps {
  targets: { url: string, name: string }[]
}

function Navbar({ targets }: NavbarProps): JSX.Element {
  return (
    <>
      <div className={styles.header_block}>
        <img src={Logo} className={styles.logo} />
        <strong className={styles.heading}>TalawaAdmin</strong>
      </div>
      <div className={styles.left_block}>
        {targets.map(({ name, url}) => <li key={name}><a href={url}>{name}</a></li>)}
      </div>
    </>
  );
}

像这样使用它:

<Navbar
  targets={[
    { name: 'Home', url: '/'},
    { name: 'People', url: '/supermember'},
    { name: 'Organisation', url: '/superorg'}
  ]}
/>