将 props 从更高级别的组件传递到更低级别的组件，React Router 正在发挥作用

Question

我目前在 App.js 中定义了我的应用程序中的所有路由。希望能够将状态（作为道具）从 Alignment 组件向下传递到 GPfSOA 组件。

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" exact component={About} />
          <Route path="/alignments" exact component={Alignments} />
          <Route path="/alignments/:id" exact component={Alignment} />
          <Route path="/alignments/segmentinfo/:id" exact component={Segments} />
          <Route path="/alignments/segmentinfo/:id/:segid" exact component={Segment} />
          <Route path="/alignments/getpoint/:id" exact component={GPfSOA} />
          <Route path="/alignments/getstatoff/:id" exact component={GSOfPA} />
          <Route path="/alignments/getalsfromxy/:x/:y" exact component={AlignList} />
          <Route path="/alignments/getsegsfromxy/:x/:y" exact component={SegmentList} />
          <Route path="/alignments/post/create" exact component={AddAlignment} />
          <Route path="/alignments/put/update/:id" exact component={EditAlignment} />
          <Route path="/alignments/ptso/list" exact component={TogglePoints} />
          <Route path="/alignments/ptso/list/:ptid" exact component={Point} />
          <Route path="/" render={() => <div>404</div>} />
        </Switch>
      </div>
    </Router>
  );
}

从 parent 到最大的 grandchild 的顺序是 App > Alignments > Alignment > GPfSOA。尝试将 item.alignment（对齐的名称）从 Alignment 组件向下（或越过）传递到 GPfSOA 组件，以便它可以在那里呈现。 item.alignment 是 Alignmnet 组件状态的属性。

我是否需要将它们设置为嵌套路线才能完成此操作（a.k.a。剪切并粘贴来自 App.js 的所有路线 children组件并将它们粘贴到对齐组件中)?

很难理解如何将特定组件定义为 parent 并将另一个组件定义为该组件的 child。我看到的所有示例都假设您希望将道具从 App.js 传递到其他组件。寻找正在使用 React Hooks 和 React Router 的示例（函数而不是类），您将 props 从组件 'below' App.js 向下传递到层次结构中更靠下的另一个组件.希望这是有道理的。

找到很多示例，例如 this one 用于 'passing function as a render props in Route component'（据推测是推荐的方法）

const PropsPage = () => {
  return (
    <h3>Props Page</h3>
  );
};

const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Link to="/404-not-found">404</Link>
        <Link to="/props-through-render">Props through render</Link>
        <Switch>
          ...
          <Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />
          <Route component={NoMatchPage} />
        </Switch>
      </Router>
      <a href="/about">about with browser reload</a>
    </section>
  );
};

export default App;

但正如我之前所说，这个例子和我发现的所有其他例子都假设你想将 props 从 App.js 传递到另一个组件。

Answer 1

您的问题可以通过创建对齐上下文来解决

  import React, { createContext, useState } from "react";

  const AlignmentContext = createContext();
  const AlignmentContextProvider = ({ children }) => {
     const [num, setNum] = useState(1);
   };

     return (
      <AlignmentContext.Provider value={{ num, setNum }}>
         {children}
      </AlignmentContext.Provider>
    );
   };

 export { AlignmentContext, AlignmentContextProvider };

现在包装您的路线需要与 AlignmentContextProvider

处于相同的上下文中

     import { AlignmentContextProvider } from 'pathto/context'

     <AlignmentContextProvider>
      <Route path="/alignments/:id" exact component={Alignment} />
      <Route path="/alignments/segmentinfo/:id" exact component={Segments} />
      <Route path="/alignments/segmentinfo/:id/:segid" exact component={Segment} />
      <Route path="/alignments/getpoint/:id" exact component={GPfSOA} />
     </AlignmentContextProvider>

并使用 useContext 挂钩获取覆盖面值

    import React, { useContext } from "react";
    import { AlignmentContext } from 'pathto/context';

    const GPfSOA = () => {
     const { num, setNum } = useContext(AlignmentContext);

将 props 从更高级别的组件传递到更低级别的组件，React Router 正在发挥作用

Passing props from higher level component to lower level component, React Router in play

parent-child

reactjs

react-router

react-router-dom

react-props