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

Question

使用 React-Router，我了解到您可以将路由属性传递给组件，如下所示:

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

不知何故，这将这里的 props 变量的属性(即 RouteComponentProps)附加到 Component 的 this.props 变量，所以现在在 Component 例如我可以这样做:

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

作为一个对 Javascript 比较陌生的人，我只是对 {...props} 语法及其工作原理感到困惑。这是否有效，因为两个变量具有相同的名称？是什么使得这些属性被添加到该特定变量中？

Answer 1

... 用于在任何变量中传播值。

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

了解更多关于Spread syntax的信息