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

小编典典

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

reactjs

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等在服务器端渲染所有内容，则此方法易于使用，但是如果您想在客户端的浏览器中创建和渲染组件，则如何将Spread
Attributes用于不使用浏览器的浏览器支持ES6 ...Spread运算符？

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

阅读 288

2020-07-22

共1个答案

小编典典

尽管语法相似，但是JSX扩展运算符与ES6扩展运算符不同，使用前者不需要后者。虽然JSX编译器可以
将带有JSX扩展运算符的JSX标签转换为使用ES6扩展运算符的JavaScript，但实际上，他们只是将其转换为ES5代码。要了解Babel如何做到这一点，请在Babel网站上进行尝试。本质上，这是：

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传播算子，并且将其转换为浏览器可以理解的内容。

2020-07-22