簡體   English   中英

在JavaScript中動態加載JSX文件

[英]Dynamically load JSX file in JavaScript

我正在嘗試為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導出一個具有exec()函數的全局JSXTransformer對象,該函數將JSX轉換為eval()結果。

您可以嘗試首先運行腳本的內容onload運行JSXTransformer.exec()

此外,FYI,從React 0.12開始不再需要@jsx編譯指示 :)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM