这个React组件中的{... props}是什么意思？

Question

刚开始使用react-router.

当我在github(底部)遇到这段代码时,我正在使用react-router @ next(版本4 ).我有弱的React + ES6-fu因此需要你的帮助.

1. 这里的{... props}是指向组件发送道具吗？
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的更多信息...