React.Js 将道具从组件传递到 NavBar 组件？

Posted 2023-03-05

【中文标题】React.Js 将道具从组件传递到 NavBar 组件？

【英文标题】：React.Js Passing props from component to NavBar component?

【发布时间】：2021-11-25 13:44:06

【问题描述】：

所以我有 React.JS 页面，这个页面由两部分组成。 NavBar 和页面内容。

在 App.js 中，我将道具传递给页面，我想在导航栏中将此道具显示为页面标题。我该怎么做？，基本上每个链接都有自己的道具，这是页面的名称，我想在 PageHeader 组件中显示这个道具。

import BrowserRouter as Router, Route, Switch  from "react-router-dom";
import Banany from "./Banany";
import Broskve from "./Broskve";
import PageHeader from "./Components/PageHeader";
import Home from "./Home";
import Hrusky from "./Hrusky";


function App() 
  return (
    <Router>
      <PageHeader/>

      <Switch>
        <Route exact path="/">
          <Home pageTitle="Home"/>
        </Route>
        <Route path="/banany">
          <Banany pageTitle="Bananas"/> <--- I want to display Bananas in PageHeader component
        </Route>
        <Route path="/broskve">
          <Broskve pageTitle="Broskve"/>
        </Route>
        <Route path="/hrusky">
          <Hrusky pageTitle="Pears"/>
        </Route>
      </Switch>

    </Router>
  );


export default App;

【参考方案1】：

如果页面标题取决于您的路线，只需将其移动到您的路线中，如下所示：

<Route path="/banany">
  <PageHeader pageTitle="Bananas" />
  <Banany pageTitle="Bananas" />
</Route>

显然还有其他方法可以实现这种行为，并且可能会重复，但这是直截了当的方法。

【讨论】：

这确实是个好主意，谢谢，我会使用你的解决方案。

【参考方案2】：

有各种各样的方法可以做到这一点。 想到的 2 个最相关的：

给每条路线一个参数，即pageTitle，就像你传递给每个组合一样。 然后您可以从导航栏访问它。 使用专用库（redux/etc..）或仅使用 React 的内置 contextAPI 管理全局状态。

在这种情况下，我会选择第一种方法，因为如果你只需要这种方法，它会更简单。