Что означает {... реквизит} в этом компоненте React?

Question

Просто начинайте с реактивного маршрутизатора.

Я использую react-router@next (версия 4), когда я натолкнулся на этот бит кода в github (внизу). У меня есть слабый React + ES6-fu, поэтому вам нужна ваша помощь.

1. Здесь {... реквизит} относится к отправке реквизитов в компонент?
2. Как {... реквизит} здесь влияет на 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

Если {...} реквизита имеет «обычай» атрибут, то пользовательский последнее значение «подпирать» (правое значение).