javascript - 在客户端执行 jsx 转换

标签 javascript reactjs babeljs

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

虽然在 in browser transform对嵌入式脚本执行 jsx 转换,以及 react-tools在服务器上可用,我无法确定如何使客户端可以使用转换功能。

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

最佳答案

JSXTransformer 模块导出两个函数:

  • transform 将 JSX 源代码作为一个字符串并返回一个对象,该对象具有一个名为 code 的键,其值是一个 JavaScript 字符串,然后可以对其进行评估.

  • exec 的工作方式类似于 transform,然后将结果传递给 eval

这个调用:

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

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

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

关于javascript - 在客户端执行 jsx 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27177430/

相关文章:

javascript - jQuery 使用 click() 分配变量

JavaScript 验证规则不起作用

javascript - 如何使用JavaScript进行表格中的计算?

javascript - React-Native <Text> 省略最后一个字符

javascript - react JS Bootstrap JS 不工作

reactjs - React 无法识别 DOM 元素上的 'activeKey' (和 'activeHref' )属性

internet-explorer - 如何在供应商 bundle 上使用 babel 的 `useBuiltIns: ' use'` 选项?

javascript - 如何使用 jquery 显示自定义样式输入文件的文件名?

javascript - webpack 是如何使用 polyfill 的?

node.js - 当我运行转译文件时,如何回溯 node.js 中的错误?