{…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中也可用。