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

【问题标题】：JSX Spread Attributes on client side non-ES6 browsers客户端非 ES6 浏览器上的 JSX 传播属性
【发布时间】：2016-02-18 07:50:04
【问题描述】：

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 中使用。如果您使用 Babel 等在服务器端渲染所有内容，这很容易使用，但是如果您想在客户端的浏览器中创建和渲染组件，您如何为不支持的浏览器使用传播属性支持 ES6 ...Spread 运算符吗？

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

【问题讨论】：

如你所知，使用 Babel

标签： javascript reactjs react-jsx

【解决方案1】：

尽管语法相似，但 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 扩展运算符，并且被转换为浏览器可以理解的内容。

【讨论】：

哦，伙计，在服务器端进行预编译......好吧，我直到现在才意识到这一点。谢谢！

【解决方案2】：

ReactJS 通常的工作流程是通过 Babel 转换 JSX（通过像 Browserify/Webpack 这样的构建工具），然后再将其提供给客户端。因此，您可以获得所有 ES6（或 ESNext）的好东西。

Getting Started | React

【讨论】：