File tree Expand file tree Collapse file tree 1 file changed +35
-5
lines changed Expand file tree Collapse file tree 1 file changed +35
-5
lines changed Original file line number Diff line number Diff line change 378
378
bar: '',
379
379
children: null,
380
380
};
381
- ` ` `
381
+ ` ` `
382
382
383
- - 尽可能少地使用扩展运算符
383
+
384
+ - 尽可能少地使用扩展运算符
384
385
385
- > 为什么? 除非你很想传递一些不必要的属性。对于React v15.6 .1 和更早的版本,你可以[给DOM 传递一些无效的HTML 属性](https: // doc.react-china.org/blog/2017/09/08/dom-attributes-in-react-16.html)
386
+ > 为什么? 除非你很想传递一些不必要的属性。对于React v15.6 .1 和更早的版本,你可以[给DOM 传递一些无效的HTML 属性](https: // doc.react-china.org/blog/2017/09/08/dom-attributes-in-react-16.html)
386
387
387
- 例外情况:
388
+ 例外情况:
388
389
- 使用了变量提升的高阶组件
389
390
` ` ` jsx
390
391
function HOC(WrappedComponent) {
399
400
}
400
401
}
401
402
}
402
- ` ` `
403
+ ` ` `
404
+
405
+ - 只有在清楚明白扩展对象时才使用扩展运算符。这非常有用尤其是在使用Mocha测试组件的时候。
406
+
407
+ ` ` ` jsx
408
+ export default function Foo {
409
+ const props = {
410
+ text: '',
411
+ isPublished: false
412
+ }
413
+
414
+ return (<div {...props} />);
415
+ }
416
+ ` ` `
417
+ 特别提醒:尽可能地筛选出不必要的属性。同时,使用[prop- types- exact](https: // www.npmjs.com/package/prop-types-exact)来预防问题出现。
418
+
419
+ ` ` `
420
+ //good
421
+ render() {
422
+ const { irrelevantProp, ...relevantProps } = this.props;
423
+ return <WrappedComponent {...relevantProps} />
424
+ }
425
+
426
+ //bad
427
+ render() {
428
+ const { irrelevantProp, ...relevantProps } = this.props;
429
+ return <WrappedComponent {...this.props} />
430
+ }
431
+ ` ` `
432
+
403
433
404
434
## Refs
405
435
You can’t perform that action at this time.
0 commit comments