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

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

javascript reactjs

Javascript {…props}语法如何将其属性传递给子组件？,javascript,reactjs,react-router,Javascript,Reactjs,React Router,使用React Router，我了解到您可以将路由属性向下传递到如下组件： <Route path="/lyrics/track/:id" render={props => ( <Component {...props} title={"gah"} content={"blabla"} /> </Route> 我只是对{…props}语法和它的工作原理感到困惑，因为我对Javascript比较陌生。这是因为两个变量的名称相同吗？是什么使这些属性被添

使用React Router，我了解到您可以将路由属性向下传递到如下组件：

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

我只是对

{…props}

语法和它的工作原理感到困惑，因为我对Javascript比较陌生。这是因为两个变量的名称相同吗？是什么使这些属性被添加到该特定变量中？

使用

…

在任何变量中传播值

当您将

…props

传递到

组件

时，您将从

props

变量获得所有属性

阅读有关的更多信息

..

用于在任何变量中传播值

当您将

…props

传递到

组件

时，您将从

props

变量获得所有属性

阅读更多关于

传播本身与变量名无关

在JSX中，您在标记内声明的任何内容都将成为组件的

props

对象的属性

在这种情况下，您要做的就是从路线中获取道具，并通过使用

…

扩展操作符使其可用于组件，该操作符适用于任何给定对象

如果您碰巧有另一个对象看起来像

foobar={foo:true，bar:false}

，您还可以将该对象扩展到组件道具中

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

这将导致组件道具中的属性

foo

和

bar

也可用。

扩展本身与变量名无关