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

发布时间：2020-12-15 09:32:11 所属栏目：百科来源：网络整理

导读：刚开始使用react-router. 当我在github(底部)遇到这段代码时,我正在使用react-router@next(版本4).我有弱反应ES6-fu因此需要你的帮助. 这里的{… props}是否指向组件发送道具？ {… props}在这里如何影响custom =“prop”？ ? Match pattern="/foo" render={

刚开始使用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 ...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!