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

你能解释一下这行是什么吗？道具和{…道具}做什么

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

}/>

试着把你的道具放在括号里，就像这样：

}/>

解释 TLDR；在渲染中传递的那些道具指示为

路由道具

，它为您提供

匹配

、

位置

和

历史

对象，您可以通过这些对象在组件中进行路由，或以希望在子组件中的方式使用这些对象（如果通过道具传递）

{…props}

只提供对象中的所有属性

..

被称为扩展语法，它有助于获得所述对象中的所有现有属性（此处为

props

）。就像传递数据组件一样，现在不需要它，但子组件通过当前组件结构需要它

在这里，

{…props}

将产生

匹配、位置和历史

传递给

渲染中的组件

反应路由器API 来源-

路线道具

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

• 匹配
• 位置
• 历史

渲染（函数）

您可以传入一个函数，以便在位置匹配时调用，而不是使用组件属性为您创建一个新的React元素。渲染道具接收与组件渲染道具相同的所有管线道具

这些道具是

react router

v4的内部API。您可以查看有关

组件的

渲染方法的更多信息

如果您传递一个组件和该组件（子组件）中的那些道具，您可以记录这些道具，您将找到
路由道具提供的所有三个道具

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

示例

你可以找到我为这个例子策划的示例代码沙盒-

备选方案

如果您不想使用
render
在内部渲染所需的组件，可以使用
with router
HOC并将组件包装到该HOC中，作为
导出默认with router（WrappedComponent）
，它将提供您需要的所有三个对象，即
匹配
，
位置
和
历史
并因此将其附加到
道具
对象中。道具
称为，用于将
道具
对象中的每个属性作为单独的道具传递给
主
组件

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

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


const obj={
福：‘福’，
酒吧：“酒吧”
};
常量道具={
巴兹：“巴兹”，
…obj
};
控制台日志（道具）