javascript - 在 JavaScript 中动态加载 JSX 文件

我正在尝试为 ReactJS 组件实现包装器 API 文件。

例如/js/test.react.js

   /** @jsx React.DOM */
var TESTCLASS = React.createClass({
    render : function() {
        return (
            <div> Test </div>
        );
    }
});

我为此编写了一个包装器 JavaScript 文件:

var testClass = {
    load: function () {
        var script = document.createElement("script");
        script.type = "text/jsx";
        document.head.appendChild(script);
        script.onload = function(){
            React.render(
                <TESTCLASS/>,
                document.body)
        };
        script.src ="./js/test.react.js";
    }
};

然后我可以在第三方 HTML 中使用包装器 API JavaScript。

<html>
<head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/jsx" src="test.js"></script>
</head>
<body>

<div id="content"></div>
<script>
    testClass.load();
</script>

</body>
</html>

但是，在我看来/js/test.react.js 不能作为纯 JavaScript 文件动态加载。任何专家都可以向我解释原因并提供适当的解决方案来编写我的包装器 API JavaScript 文件吗？

最佳答案

JSXTransformer*.js 导出一个全局 JSXTransformer 对象，它有一个 exec() 函数，它转译 JSX 然后 eval( )是结果。

您可以先尝试使用脚本内容 onload 运行 JSXTransformer.exec()。

此外，仅供引用，@jsx pragma is no longer required从 React 0.12 开始 :)

关于javascript - 在 JavaScript 中动态加载 JSX 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27961150/