从父状态传递道具到子组件 - React Router答案

【问题标题】：Passing props to Children component from Parent state- React Router从父状态传递道具到子组件 - React Router
【发布时间】：2017-05-18 20:04:42
【问题描述】：

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

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

自从

在<Router /> 中，父App 的状态不在范围内，无法将其传递给子<Route /> 中的组件，或者
父组件中对子组件的所有引用都是{this.props.children}，而不是<aComponent data={this.state.somePortion} />，同样，不能通过表达式{this.props.children} 的语法传递它。

有什么收获？

【问题讨论】：

你看过 redux/flux 吗？可能会帮助您更轻松地解决此问题
是的，我看过它们。因为 redux store 位于主组件的上部，而提供由绑定库 <Provider/> 组件 react-redux 中的 react-redux 组件提供，因此路由器层次结构中的所有组件都可以通过作为 props 传递并访问在带有this.props.route.propName 的组件中。谢谢。但是在我的设置中应用 redux 对我来说似乎有点困难。没有它的任何解决方案。一定有办法，而且不要太麻烦。
利用一些利用者让生活更轻松有时会让你失去一些轻松，要重新获得丢失的部分，你需要另一个可能会限制你的结构。对我来说，在这种情况下，使用 React Router 使顶部组件中的状态 un-passable 到子组件。我将如何使数据沿着组件向下流动，最好是使用 React.js 中的 props。正确的？一定有一些简单明了的方法。

【解决方案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 上进行更多重用。

【讨论】：

HOC 或高阶组件是简单地包装另一个组件的组件。它们在您需要执行逻辑但又不想将逻辑添加到内部组件中的情况下非常有用，这会使内部组件更易于重用。
Agian 如何通过您描述的这种构造达到顶部组件中的状态。状态在App 组件中。路由层次结构如下：<Router> <Route component={App}> </Route component={Sub}></Route> <Route> </Router>
如果没有像我描述的第二个子弹这样的东西似乎是不可能的，除非将 React state 移动到 React-Router 的 <Router/> 上方 顶级组件 App 被Redux之类的东西
对，我误会了。是的，如果应用程序的其他地方需要，您的全局状态不能位于 App。
而全局状态在顶级组件，这里是，而在其他地方需要，即子组件是React应用中非常典型的事情，甚至可能是您选择 React.js 进行前端开发的原因之一。