{…props}语法如何将其属性传递给子组件？

Question

使用React-Router，我了解到您可以将路由属性传递给类似这样的组件：

<Route path="/lyrics/track/:id" render={props => (
    <Component {...props} title={"gah"} content={"blabla"}  />
</Route>

并以某种方式将props变量的属性（这是RouteComponentProps到Component的this.props变量中，因此现在在Component I中可以执行以下操作：

<p>{this.props.title}</p>
<p>{this.props.content}</p>
<p>{this.props.match.params.id}</p>

作为Java的新手，我对{...props}语法及其工作原理感到困惑。 因为两个变量都具有相同的名称，这行得通吗？ 是什么使这些属性添加到该特定变量中呢？

Answer 1

...用于在任何变量中扩展值。

当您将...props传递给Component您将从props变量中获取所有属性。

阅读更多有关Spread语法的信息

Answer 2

传播本身与变量名无关。

在JSX中，您在标签内部声明的所有内容都将成为组件的props对象的属性。

在这种情况下，您要做的就是从路线中获取道具，并使用... spread运算符将其提供给组件，该运算符适用于任何给定的对象。

如果您碰巧有另一个看起来像foobar = { foo: true, bar: false } ，则还可以将该对象传播到组件props中。

<Component {...props} {...foobar} title={"gah"} content={"blabla"}  />

这将导致属性foo和bar在组件props中也可用。