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

Question

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

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

以某种方式，这会将props变量的属性附加到RouteComponentProps的{​​{1}}变量的this.props上，因此现在在Component中，我可以例如进行以下操作：< / p>

Component

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

Answer 1

...用于在任何变量中散布值。

将...props传递给Component时，将从变量props中获得所有属性。

详细了解Spread syntax

Answer 2

扩展本身与变量名无关。

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

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

如果您碰巧有另一个看起来像foobar = { foo: true, bar: false }的对象，那么您也可以将该对象散布到组件props中。

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

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