REACT - .props 不是函数

Question

我正在尝试创建一个项目，其中菜单和侧边栏仅出现在主页中，而后退按钮出现在除主页之外的所有页面中。 问题是，我无法将道具传递给所有页面。只有 FriendDetail 和 GoBack 组件能够传递道具。在所有其他页面中，道具未通过。 我需要在大多数组件中传递道具，以便后退按钮能够出现。

我的 App.js 文件：

function App() {
  const [showNav, setShowNav] = useState(true);
  console.log("shownav", showNav);
  return (
    <div className="app">
      <BrowserRouter>
        {showNav && <Menu />}
        {showNav && <Sidebar />}
        {!showNav && <GoBack funcNav={setShowNav} />}

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="duel" element={<Online />} funcNav={setShowNav} />
          <Route
            path="friend/:id"
            element={<FriendDetail funcNav={setShowNav} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

我的Online.js文件：（项目中我无法传递道具的众多组件之一）

function Online(props) {
  useEffect(() => {
    props.funcNav(false);
  });
  console.log("online", props);
  return <div>Online</div>;
}

My FriendDetail.js 文件：（唯一可以传递道具的组件）

function Friend(props) {
  let { id } = useParams();
  const data = friendsData.data;

  const [friend, setFriend] = useState();

  useEffect(() => {
    let frienddetail = data.find((e) => e.id == id);
    setFriend(frienddetail);
    props.funcNav(false);
  }, [friend]);
  if (!friend) return;

  return (
    <div>
            <p>{friend.nickname}</p>
    </div>
  );
}

这是我得到的错误：

Answer 1

您需要将 prop 传递给组件而不是路由。该路线只是一个包装器。对于朋友的详细信息，您正确地做到了这一点。

      <Route path="duel" element={<Online funcNav={setShowNav} />}  />
      <Route
        path="friend/:id"
        element={<FriendDetail funcNav={setShowNav} />}
      />

Answer 2

Online 组件没有 funcNav 属性

function App() {
  const [showNav, setShowNav] = useState(true);
  console.log("shownav", showNav);
  return (
    <div className="app">
      <BrowserRouter>
        {showNav && <Menu />}
        {showNav && <Sidebar />}
        {!showNav && <GoBack funcNav={setShowNav} />}

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="duel" element={<Online funcNav={setShowNav} />} funcNav={setShowNav} />
          <Route
            path="friend/:id"
            element={<FriendDetail funcNav={setShowNav} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Answer 3

我从来没有看过你的代码，但我会告诉你我遇到同样问题时的体会。 基本上，我的道具通过两个孩子传递到需要它的组件（我知道，......“道具钻孔”，大声笑）。 我的问题是我没有更新临时组件以将该功能传递给最终组件！ 有一个小时我不会回来了，哈哈！