首页 文章

从“父状态 - 反应路由器”将道具传递给子组件

提问于
浏览 次
0

通过将props传递给子组件的 Route 组件并通过 this.props.route.propName 在此路由的子组件中访问它，可以将props传递给子路由的组件（使用React Router时） .

子组件中所需的道具是它的父组件状态的一部分而不仅仅是组件的一些不相关数据？

以来

  • 在 <Router /> 中父级 App 的状态不在范围内，无法将其传递给子 <Route /> 中的组件，或者

  • 对父组件中的子组件的所有引用都是 {this.props.children} 而不是 <aComponent data={this.state.somePortion} /> ，再一次，它不能通过表达式 {this.props.children} 的语法传递它 .

捕获量是多少？

reactjs react-router

1 回答

  • 0

    更新：您的状态将需要存储在呈现路径然后传递到路径的组件中，而不是 App 中的存储状态 . 如果要将组件维护为当前propType列表，可以使用下面的方法来包装组件 .

    如果您不能使用 this.props.route.propName ，则另一个选项是使用包含组件并在路径上使用它的高阶组件（HOC），然后将路径道具传递给您要渲染的组件 .

    const WrappedComponent = ({route}) => {
  return (<Component data={route.data} />);
};

    然后，您可以进一步扩展，您可以传递组件以呈现到路由 .

    <Route to='/about' component={WrappedComponent} data={[]} page={AboutPage} />

    然后更新包装为这样的东西：

    const WrappedComponent = ({ route }) => {
   const { page:Component, ...rest } = route;
   return <Component {...rest} />;
};

    这将使用一些ES2015与其余运算符，但可以在此HOC上进行更多重用 .

    回复于

相关问题