React导航栏条件渲染实现：Prop Drilling方案指导

核心思路 #

在父组件中维护当前页面的标识状态，通过组件层级逐层传递该状态到Navbar组件，最终在Navbar内根据状态渲染对应内容。

步骤示例 #

1. 父组件新增页面状态并传递给子组件 #

修改父组件代码，添加currentPage状态管理当前页面类型，渲染子组件时将该状态向下传递：

import { useState } from 'react';

function Parent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isSignUp, setIsSignUp] = useState(false);
  // 定义当前页面状态，可选值：'home' | 'dashboard'
  const [currentPage, setCurrentPage] = useState('home');

  const handleLogin = () => {
    setIsLoggedIn(true);
    setCurrentPage('dashboard'); // 登录后切换页面标识
  };

  const handleReturnMainPage = () => {
    setIsLoggedIn(false);
    setCurrentPage('home'); // 返回主页时更新页面标识
  };

  const handleSignUp = () => {
    setIsSignUp(true);
  };

  let content;
  if (isLoggedIn) {
    // 将currentPage传递给Login组件
    content = <Login onReturn={handleReturnMainPage} currentPage={currentPage} />;
  } else if (isSignUp) {
    content = <SignUp />;
  } else {
    // 将currentPage传递给HomePage组件
    content = <HomePage onLogin={handleLogin} onSignUp={handleSignUp} currentPage={currentPage} />;
  }

  return <React.Fragment>{content}</React.Fragment>;
}

2. 中间组件接力传递状态 #

HomePage组件接收并传递状态给Navbar

function HomePage({ onLogin, onSignUp, currentPage }) {
  return (
    <div>
      {/* 把currentPage传递给Navbar */}
      <Navbar currentPage={currentPage} />
      {/* 其他HomePage内容 */}
    </div>
  );
}

Login组件接收并传递状态给Dashboard

function Login({ onReturn, currentPage }) {
  return (
    <div>
      {/* 将currentPage传递给Dashboard */}
      <Dashboard onReturn={onReturn} currentPage={currentPage} />
    </div>
  );
}

Dashboard组件接收并传递状态给Navbar

function Dashboard({ onReturn, currentPage }) {
  return (
    <div>
      {/* 将currentPage传递给Navbar */}
      <Navbar currentPage={currentPage} onReturn={onReturn} />
      {/* 其他Dashboard内容 */}
    </div>
  );
}

3. Navbar组件根据状态渲染对应内容 #

function Navbar({ currentPage, onReturn }) {
  return (
    <nav>
      {currentPage === 'home' ? (
        <>
          <button>首页登录入口</button>
          <button>首页注册入口</button>
        </>
      ) : (
        <>
          <button>仪表盘数据查看</button>
          <button onClick={onReturn}>返回首页</button>
        </>
      )}
    </nav>
  );
}

优化小技巧 #

• 可以将页面标识定义为常量，避免硬编码字符串，降低出错概率：

  const PAGE_TYPES = {
    HOME: 'home',
    DASHBOARD: 'dashboard'
  };
  

  后续组件中直接使用PAGE_TYPES.HOME这类常量替代字符串即可。
• 如果后续组件层级加深，Prop Drilling会变得繁琐，此时可以考虑用Context API替代，但当前场景下Prop Drilling是最直接高效的方案。

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