Performing jsx transforms on the client

 

I'm building an application which allows users to build and apply their own components and templates. I want to allow users to edit strings of jsx data and then perform the transform client-side for render.

While the in the in browser transform performs jsx transforms on embedded scripts, and react-tools is available on the server, I can't determine how to make the transform function available to the client.

The inline browser transform doesn't appear to have provide any methods for access, and Atomify/Browserify crashes when I try to using the react-tools transform on the client.

The JSXTransformer module exports two functions:

  • transform takes JSX source code as a string and returns an object with a key named code whose value is a JavaScript string that can then be eval'd.

  • exec works like transform and the result is then passed to eval .

    • This call: 

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

    ...produces this plain JavaScript output: 

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

    JSXTransformer was deprecated in mid-2015 in favor of Babel's in-browser solution, babel-standalone : https://babeljs.io/docs/setup/#installation

    Discussion here: https://github.com/facebook/react/issues/5497

    链接地址: http://www.djcxy.com/p/52102.html

    上一篇: 单个模块中有多个React组件

    下一篇: 在客户端上执行jsx转换