客户端非ES6浏览器上的JSX Spread属性

时间:2015-11-17 03:13:01

标签: javascript reactjs react-jsx

ReactJS JSX有一种方法可以轻松地向组件添加大量属性:

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

这些称为传播属性。

https://facebook.github.io/react/docs/jsx-spread.html#spread-attributes

...表示法称为ES6中使用的Spread运算符。如果您使用Babel等渲染服务器端的所有内容,这很容易使用,但如果您想在客户端的浏览器中创建和呈现组件,那么如何将浏览器属性用于不需要的浏览器? ; t支持ES6 ... Spread运算符?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Browser_compatibility

2 个答案:

答案 0 :(得分:4)

尽管语法相似,但JSX扩展运算符与ES6扩展运算符不同,使用前者不需要后者。虽然JSX转换器可以将带有JSX扩展运算符的JSX标记转换为使用ES6扩展运算符的JavaScript,但实际上它们只是将其转换为ES5代码。要了解Babel是如何做到的,try it out on the Babel site。从本质上讲,这是:

var obj = { className: 'foo' };
var el = <Component id='bar' {...obj}/>;

......变成了这个:

var obj = { className: 'foo' };
var el = React.createElement(Component,
           Object.assign({ id: 'bar' }, obj));

(根据属性的位置略有不同。)

不需要ES6传播运营商。

换句话说,如果您正在使用转换程序将JSX转换为JavaScript,那么,由于没有浏览器直接支持JSX,您不必担心转换后的代码会传播运算符,因为您没有使用ES6扩展运算符,所以您使用的是JSX扩展运算符,并且可以转换为浏览器所理解的内容。

答案 1 :(得分:0)

ReactJS的常用工作流程是将JSX转换为Babel(通过Browserify / Webpack之类的构建工具),然后再将其提供给客户端。因此,您将获得所有ES6(或ESNext)的好东西。

Getting Started | React