javascript - 在客户端执行 jsx 转换

Question

我正在构建一个允许用户构建和应用他们自己的组件和模板的应用程序。我想允许用户编辑 jsx 数据字符串，然后执行转换客户端进行渲染。

虽然浏览器中的转换在嵌入式脚本上执行 jsx 转换，并且服务器上提供了react-tools，但我无法确定如何使转换功能对客户端可用。

内联浏览器转换似乎没有提供任何访问方法，当我尝试在客户端上使用 react-tools 转换时，Atomify/Browserify 崩溃。

Answer 1

该JSXTransformer模块导出两个函数：

• transform将 JSX 源代码作为字符串并返回一个对象，该对象的键名为code，其值是一个 JavaScript 字符串，然后可以进行 eval 处理。

• exec像这样工作transform，然后将结果传递给eval.

这个电话：

JSXTransformer.transform("React.createClass({render: function() { return <div></div>; } });").code

...产生这个纯 JavaScript 输出：

"React.createClass({render: function() { return React.createElement("div", null); } });"

Answer 2

JSXTransformer在 2015 年中被弃用，取而代之的是 Babel 的浏览器内解决方案babel-standalone：https ://babeljs.io/docs/setup/#installation

在这里讨论：https ://github.com/facebook/react/issues/5497