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

刚开始使用react-router.

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

>这里的{… props}是否指向组件发送道具？
> {… props}在这里如何影响custom =“prop”？

ž

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

考虑下面的例子：

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 ...