将道具从父状态传递给子组件-React Router

Question

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

子组件所需的道具又是其父组件状态的一部分，而不仅仅是与组件无关的数据吗？

以来

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

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

有什么收获？

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 +与rest运算符一起使用，但将允许在此HOC上进行更多重用。