将道具传递到React路由中的组件

Question

您能解释一下这行吗？ 什么是道具和{... props}？

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

Answer 1

说明

TLDR; 在render中传递的那些道具表示为route-props ，它为您提供match ， location和history对象，您可以通过它们通过组件进行路由或以子组件中的方式使用想要的那些对象（如果通过props传递）。

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

在这里{...props}将产生match,location and history传递到render组件的match,location and history

React Router API

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

路线道具

所有这三种渲染方法将通过相同的三个路由道具

• 比赛
• 位置
• 历史

渲染（功能）

无需使用组件prop为您创建新的React元素，而是可以传递位置匹配时要调用的函数。 渲染道具接收与组件渲染道具相同的所有路线道具。

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

如果传递一个组件和该组件（子组件）中的那些道具，则可以记录这些道具，并且会找到route-props提供的所有三个route-props

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

例

你可以找到例子codesandbox我已经策划只是这个例子- https://codesandbox.io/embed/0m1z1xwxnw

替代

如果您不想使用render在内部渲染所需的组件，则可以使用withRouter HOC并将组件包装到该HOC中，作为export default withRouter(WrappedComponent) ，它将提供您想要的所有三个对象，即match ， location和history并将其附加到props对象中

Answer 2

...props被称为spread syntax ，用于将props对象中的每个属性作为单独的prop传递给Home组件。

如果将JSX编译为React.createElement调用，可能会更容易理解为什么这行得通。

React.createElement(Home, {
  ...props
});

 const obj = { foo: 'foo', bar: 'bar' }; const props = { baz: 'baz', ...obj }; console.log(props); 

Answer 3

尝试将道具放在方括号中，如下所示： <Route exact path='/' render={(props) => <Home {...props} />} />