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

Question

刚刚开始使用react-router。

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

1. 这里的 {...props} 是指向组件发送 props 吗？
2. 这里的 {...props} 对 custom="prop"有什么影响？

z

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