在 React Routing 中将 props 传递给组件

Question

你能解释一下这条线是什么吗？props 和 {...props} 有什么作用？

<Route exact path='/' render={props => <Home {...props} />} />

Answer 1

解释

TLDR；在渲染中传递的那些道具指示为route-props您提供的对象match，location以及history您可以通过组件路由或在子组件中以您想要的方式使用这些对象的对象（如果通过道具传递）。

{...props}只提供它在 object 中的所有属性。...被称为传播语法，它有助于获取提到的对象中的所有现有属性（此处props）。就像传递数据组件现在不需要它一样，但是孩子们通过当前的组件结构需要它。

这里{...props}将屈服match,location and history传递给组件render

反应路由器 API

来源 - https://reacttraining.com/react-router/web/api/Route/render-func

路线道具

所有三个渲染方法都将传递相同的三个路由道具

• 比赛
• 地点
• 历史

渲染（功能）

无需使用 component prop 为你创建一个新的 React 元素，你可以传入一个在位置匹配时调用的函数。渲染道具接收所有与组件渲染道具相同的路由道具。

这些道具是react-routerv4 的内部 API 。您可以查看有关组件render方法的更多信息<Route>

如果你传递一个组件和那个组件（子）中的那些道具，你可以记录这些道具，你会发现所有的三个道具都由 route-props

子组件中的道具（如果您在子组件中登录控制台）： Object {match: Object, location: Object, history: Object, staticContext: undefined}

例子

你可以找到我为这个例子策划的示例代码和盒子 - https://codesandbox.io/embed/0m1z1xwxnw

选择

如果你不希望使用render在内部渲染组件你愿意，你可以使用withRouterHOC和包装你的组件成HOC因为export default withRouter(WrappedComponent)它会提供你想即所有三个对象match，location并history因此将其追加为props对象