反应 - .props 不是一个函数答案

【问题标题】：REACT - .props is not a function反应 - .props 不是一个函数
【发布时间】：2022-09-29 21:16:34
【问题描述】：

我正在尝试创建项目，其中菜单和侧边栏仅出现在主页中，而后退按钮出现在除主页之外的所有页面中。问题是，我无法将道具传递给所有页面。只有 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>;
}

我的 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>
  );
}

这是我得到的错误：

Error in the Online.js file

标签： javascript reactjs react-props

【解决方案1】：

您需要将道具传递给组件而不是路由。路由只是一个包装器。您为朋友详细信息正确执行了此操作。

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

【讨论】：

【解决方案2】：

Online 组件没有 funcTion 属性

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>
  );
}

【讨论】：