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

IT技术 javascript reactjs react-jsx
2021-05-03 19:40:03

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 等在服务器端渲染出所有内容,这很容易使用,但是如果您想在客户端的浏览器中创建和渲染组件,您如何为不支持的浏览器使用 Spread Attributes支持 ES6...扩展运算符吗?

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

2个回答

尽管语法相似,但 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 扩展运算符,然后将其转换为浏览器可以理解的内容。

ReactJS 通常的工作流程是在将 JSX 提供给客户端之前通过 Babel(通过像 Browserify/Webpack 这样的构建工具)转换 JSX。因此,您将获得所有 ES6(或 ESNext)好东西。

入门 | react