React项目中多组件props传递失败引发.props is not a function报错的技术咨询

首先得指出你当前代码里的核心问题：你在<Route>标签上直接添加funcNav={setShowNav}是无效的。React Router的Route组件并不会把这类自定义属性转发给它的element对应的页面组件，只有像FriendDetail那样，把props直接写到组件标签里（<FriendDetail funcNav={setShowNav} />）才是正确的传递方式。

一、快速修复当前报错 #

1. 修正Route的props传递方式 #

修改App.js里的Online路由，把funcNav直接传递给<Online>组件：

<Route path="duel" element={<Online funcNav={setShowNav} />} />

这样Online组件就能正确接收到funcNav props了。

2. 修复useEffect的无限循环问题 #

你在Online和FriendDetail里的useEffect都存在依赖数组的问题，会导致代码无限重复执行：

• Online.js里给useEffect加空依赖数组，确保只在组件挂载时执行一次：

function Online(props) {
  useEffect(() => {
    props.funcNav(false);
  }, []); // 空数组表示仅挂载时执行
  console.log("online", props);
  return <div>Online</div>;
}

• FriendDetail.js里把依赖数组的friend换成id（friend是组件自身的state，放在依赖里会触发无限循环）：

useEffect(() => {
  let frienddetail = data.find((e) => e.id == id);
  setFriend(frienddetail);
  props.funcNav(false);
}, [id]); // 仅当id变化时执行

二、更优雅的全局状态管理（推荐） #

如果后续页面越来越多，每个页面都手动传funcNav会非常繁琐。可以用React Context来全局管理showNav状态，让所有组件都能直接访问和修改它，不用再手动传props。

1. 创建导航Context #

新建NavContext.js文件：

import { createContext, useContext, useState } from 'react';

const NavContext = createContext();

export function NavProvider({ children }) {
  const [showNav, setShowNav] = useState(true);

  return (
    <NavContext.Provider value={{ showNav, setShowNav }}>
      {children}
    </NavContext.Provider>
  );
}

export function useNav() {
  return useContext(NavContext);
}

2. 在App.js中使用Context包裹路由 #

import { NavProvider } from './NavContext';

function App() {
  return (
    <div className="app">
      <NavProvider>
        <BrowserRouter>
          <NavControls />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="duel" element={<Online />} />
            <Route path="friend/:id" element={<FriendDetail />} />
          </Routes>
        </BrowserRouter>
      </NavProvider>
    </div>
  );
}

// 把导航控制抽成独立组件，方便使用Context
function NavControls() {
  const { showNav, setShowNav } = useNav();
  return (
    <>
      {showNav && <Menu />}
      {showNav && <Sidebar />}
      {!showNav && <GoBack funcNav={setShowNav} />}
    </>
  );
}

3. 页面组件直接使用Context #

比如Online.js：

import { useNav } from './NavContext';

function Online() {
  const { setShowNav } = useNav();
  useEffect(() => {
    setShowNav(false);
  }, [setShowNav]);
  
  return <div>Online</div>;
}

FriendDetail.js同理，直接通过useNav()获取setShowNav即可，不用再接收props。

这样不仅解决了props传递的问题，还让代码结构更清晰，后续新增页面也不用重复写props传递的逻辑。

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