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

Question

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

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

由于

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

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

有什么收获？

Answer 1

更新：代替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上进行更多重用。