在 JavaScript 中动态加载 JSX 文件

Dynamically load JSX file in JavaScript

本文关键字：JSX 文件 加载 动态 JavaScript      更新时间：2023-09-26

我正在尝试为 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()。

此外，仅供参考，从 React 0.12 开始不再需要@jsx编译指示:)

相关文章：