codecamp

JSX 展开属性

如果你事先知道组件需要的全部 Props(属性),JSX 很容易地这样写:

  var component = <Component foo={x} bar={y} />;

修改 Props 是不好的,明白吗

如果你不知道要设置哪些 Props,那么现在最好不要设置它:

  var component = <Component />;
  component.props.foo = x; // 不好
  component.props.bar = y; // 同样不好

这样是反模式,因为 React 不能帮你检查属性类型(propTypes)。这样即使你的 属性类型有错误也不能得到清晰的错误提示。

Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。

展开属性(Spread Attributes)

现在你可以使用 JSX 的新特性 - 展开属性:

  var props = {};
  props.foo = x;
  props.bar = y;  var component = <Component {...props} />;

传入对象的属性会被复制到组件内。

它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。

  var props = { foo: 'default' };  var component = <Component {...props} foo={'override'} />;  console.log(component.props.foo); // 'override'

这个奇怪的 ... 标记是什么?

这个 ... 操作符(增强的操作符)已经被 ES6 数组 支持。相关的还有 ES7 规范草案中的 Object 剩余和展开属性(Rest and Spread Properties)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。


深入 JSX
JSX 陷阱
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }