如何在React组件间传递包含函数的对象（从App.js到Navbar.js）

我来帮你分析下问题所在，你遇到的Logout点击没反应的情况，主要有几个核心原因和对应的修复方案：

问题根源分析 #

1. React Router Link的默认行为干扰：你在<Link>组件上绑定了onClick，但Link的默认逻辑是点击后立即触发页面导航，这会导致你的logout函数要么执行不完整，要么因为页面跳转刷新，看起来像是没生效。
2. 未跟踪登录状态的变化：你直接通过localStorage.getItem('token')来判断登录状态，但localStorage的修改不会自动触发React组件的重新渲染，所以即使执行了logout移除了token，导航栏也不会立刻更新为未登录状态。
3. Route未使用Switch包裹：你的多个Route没有用<Switch>包裹，会导致多个匹配的Route同时渲染（比如访问/Login时，/的Home组件也会渲染），这可能引发其他意外问题。

具体修复方案 #

方案一：修改Link的onClick逻辑，阻止默认导航 #

在NavBar.js中，我们需要先执行自定义的onClick函数，再根据需求阻止默认的导航行为：

const NavBar = (props) => {
  const itemList = props.items.map((item, index) => {
    const handleClick = (e) => {
      // 先执行自定义的点击函数（如果存在）
      if (item.onClick) {
        item.onClick();
      }
      // 对于Logout项，阻止默认导航，避免页面跳转打断逻辑
      if (item.name === "Logout") {
        e.preventDefault();
        // 执行完logout后，可以手动跳转到首页
        window.location.href = "./";
      }
    };

    return (
      <li key={index}>
        <Link href={item.href} onClick={handleClick} className="nav-item">
          {item.name}
        </Link>
      </li>
    );
  });

  return (
    <nav className="navbarItems">
      <h1><a className="navbarLogo" href="./">Bunnify</a></h1>
      <div className="menuIcon"></div>
      <div>
        <ul className="navbarMenu">{itemList}</ul>
      </div>
    </nav>
  );
};
export default NavBar;

方案二：将Logout改为普通按钮（更推荐） #

Logout本质是执行操作而非导航，所以可以在数据数组中区分类型，避免用Link：

1. 修改App.js的数组定义：

function App() {
  // 用useState跟踪登录状态，确保状态变化触发组件重渲染
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));

  const logout = () => {
    localStorage.removeItem('token');
    // 更新状态，让导航栏自动切换为未登录菜单
    setIsLoggedIn(false);
  };

  const notLoggedInArray = [
    { name: "Login", href: "./Login", type: "link" },
    { name: "Register", href: "./Register", type: "link" },
    { name: "Bunnies", href: "./Bunnies", type: "link" }
  ];
  const LoggedInArray = [
    { name: "Logout", onClick: logout, type: "button" },
    { name: "Bunnies", href: "./Bunnies", type: "link" }
  ];

  return (
    <div>
      <RemoveScrollBar />
      <NavBar items={isLoggedIn ? LoggedInArray : notLoggedInArray} />
      {/* 用Switch包裹Route，确保只渲染第一个匹配的路由 */}
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/Login">
          <Login />
        </Route>
        <Route path="/Register">
          <Register />
        </Route>
        <Route path="/Bunnies">
          <BunnyLogo name='Adiel' bodyColor="#FFFF00" earsColor='#00F000' faceColor='#FF0000' />
        </Route>
      </Switch>
    </div>
  );
}

2. 修改NavBar.js来区分渲染Link和按钮：

const NavBar = (props) => {
  const itemList = props.items.map((item, index) => {
    if (item.type === "button") {
      return (
        <li key={index}>
          <button onClick={item.onClick} className="nav-item">
            {item.name}
          </button>
        </li>
      );
    } else {
      return (
        <li key={index}>
          <Link href={item.href} className="nav-item">
            {item.name}
          </Link>
        </li>
      );
    }
  });

  return (
    <nav className="navbarItems">
      <h1><a className="navbarLogo" href="./">Bunnify</a></h1>
      <div className="menuIcon"></div>
      <div>
        <ul className="navbarMenu">{itemList}</ul>
      </div>
    </nav>
  );
};
export default NavBar;

额外注意点 #

• 一定要用useState跟踪登录状态，而不是直接依赖localStorage，这样状态变化时组件会自动重新渲染，导航栏也会及时更新。
• 用<Switch>包裹Route是React Router的最佳实践，避免多个路由同时渲染的问题。

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