如何在React中使用下拉菜单实现页面的条件渲染

你当前代码的核心问题是维护了两套完全独立的导航数据，下拉菜单数据和页面切换逻辑没有关联，只需要统一数据源、关联点击事件即可实现功能。 #

改造要点 #

• 统一导航数据源，将带下拉的导航层级结构定义在App组件中，避免分开维护数据不同步
• 给下拉菜单组件传入页面切换方法和当前页面状态，让下拉选项点击时可以触发页面切换
• 合并普通导航项和带下拉导航项的渲染逻辑，减少冗余代码

改造后完整代码 #

App组件 #

function App() {
  // 统一导航配置，带children的为有下拉的导航项
  const [navConfig] = useState([
    {
      id: 1,
      name: 'Home',
      children: null
    },
    {
      id: 2,
      name: 'About',
      children: [
        {id: 21, name: 'About Me'},
        {id: 22, name: 'About Tampa Bay'}
      ]
    }
  ])
  // 拍平所有可跳转页面，用于初始化和页面匹配
  const pages = navConfig.flatMap(item => {
    if (item.children) return item.children
    return [item]
  })
  const [currentPage, setCurrentPage] = useState(pages[0])
  return (
    <div>
      <Nav 
        navConfig={navConfig}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      ></Nav>
      <main>
        <Pages currentPage={currentPage}></Pages>
      </main>
    </div>
  );
}

Nav组件 #

function Nav(props) {
  const { navConfig = [], setCurrentPage, currentPage } = props;
  return (
    <header className="flex-row">
      <h1 class="name-tag">
        <img src={"../../assets/Logo1.png"} alt="站点logo" />
      </h1>
      <nav>
        <ul className="flex-row nav-list">
          {/* 遍历统一的导航配置，普通项直接渲染，带下拉的用NavItems渲染 */}
          {navConfig.map(navItem => (
            !navItem.children ? (
              <li className={`li-spacing text-format ${currentPage.name === navItem.name && 'navActive'}`} key={navItem.id}>
                <span onClick={() => { setCurrentPage(navItem) }}>{navItem.name}</span>
              </li>
            ) : (
              <NavItems 
                key={navItem.id} 
                item={navItem} 
                currentPage={currentPage}
                setCurrentPage={setCurrentPage}
              />
            )
          ))}
        </ul>
      </nav>
    </header>
  )
}

NavItems组件 #

function NavItems(props) {
  const { item, currentPage, setCurrentPage } = props
  return (
    <div className="dropdown">
      <li className="nav-list-item">{ item.name }</li>
      <div className="dropdown-item">
        {item.children.map(subItem => (
          <p 
            key={subItem.id}
            className={currentPage.name === subItem.name ? 'navActive' : ''}
            onClick={() => setCurrentPage(subItem)}
          >
            { subItem.name }
          </p>
        ))}
      </div>
    </div>
  )
}

export default NavItems;

如果你的导航父项（比如About）本身也需要支持点击跳转，直接给对应配置加name匹配的页面即可，无需额外调整逻辑。

内容的提问来源于stack exchange，提问作者Dan