這個React組件中的{... props}是什麼意思？

Question

剛剛開始與react-router。

我在使用react-router@next（版本4）時遇到了github（位於底部）的這段代碼。我有弱的React + ES6-fu因此需要你的幫助。

1. {...道具}這裏指的是發送道具的組件？
2. {... props}如何影響custom =「prop」？

Ž

<Match pattern="/foo" 
     render={(props) => ( 
     <YourRouteComponent {...props} custom="prop"/> 
     )} 
/> 

Answer 1

考慮下面的例子：

props = { 
    propA: "valueA", 
    propB: "valueB", 
    propC: "valueC" 
}; 

然後，

<SomeComponent {...props} /> 

相當於

<SomeComponent propA="valueA" propB="valueB" propC="valueC" /> 

---

<SomeComponent {...props} propC="someOtherValue" /> 

相當於

<SomeComponent propA="valueA" propB="valueB" propC="someOtherValue" /> 

---

同時請注意，

<SomeComponent propC="someOtherValue" {...props} /> 

將成爲

<SomeComponent propA="valueA" propB="valueB" propC="valueC" /> 

訂單很重要。

瞭解更多關於JSX Spread Operator ...

Answer 2

如果{...}道具具有「自定義」屬性，那麼定製的最後一個值是「託」（右值）。