如何使用jquery load加载React jsx?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (94)

我有一个文件(主)使用jquery .load()调用另一个文件(已加载)。

在加载的文件中,javascrips可以工作,但jsx代码会被忽略。

是否可以通过这种方式加载jsx代码?如果是的话,怎么样?

如果没有,我们有什么替代方案 - 如何处理加载文件中的jsx代码?

母版代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React</title>
    <script src="https://fb.me/react-with-addons-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#loaded").load("loaded.html", function(responseText, textStatus, req) {});
      });
    </script>

  </head>
  <body>

  <p>Master page</p>

  <div id="loaded"></div>

  </body>
</html>

加载页面代码:

<script type="text/javascript">
  console.log("JQUERY WORKS");
</script>

<script type="text/jsx">
  console.log("REACT WORKS");
</script>


<p>loaded page</p>

编辑:我想要完成的是什么:我正在开发一个Web应用程序,用jquery加载它的“页面片段”,我需要在该片段中呈现一个React组件。

提问于
用户回答回答于

JSX变换器带有一个转换方法,所以你可以尝试类似的东西:

$.get('loaded.html', function(jsx) {
    var transformed = JSX.transform(jsx);
    $('#loaded').html('<script>'+transformed.code+'</script>');
})
用户回答回答于

React似乎没有这样的工作流程。更好的方法是(例如):

  • 安装反应工具 npm install -g react-tools
  • 在(例如)jsx文件夹中的.jsx文件中开发组件
  • 如果使用console命令将.js文件编辑为(例如)js文件夹,则自动编译jsx jsx --extension jsx --watch jsx / js /
  • 在网络应用中使用.js文件

扫码关注云+社区

领取腾讯云代金券