Question

我有一个文件（主）使用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应用程序，它会加载其页面片段＆＃34;使用jquery加载，我需要在该片段内呈现一个React组件。

Answer 1

不确定你在这里尝试做什么，但JSX变换器附带了一个转换方法，所以你可以尝试类似的东西：

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

Answer 2

这样的工作流程似乎与React无关。更好的方法是（例如）：

安装反应工具

npm install -g react-tools
在（例如）jsx文件夹中的.jsx文件中开发组件
如果使用控制台命令将.js文件编辑为（例如）js文件夹，则自动编译jsx

jsx --extension jsx --watch jsx / js /
在网络应用中使用.js文件

Answer 3

您必须将JS / jQuery逻辑与React的逻辑分开

我建议您在应用程序顶部构建一个非反应程序，以便管理您的片段

阅读enable exceptions开头的句子，有关提取和评估动态加载的脚本，以及有关插入<script>指向自运行组件的标记的信息（见后，解决方案2）

解决方案1：

// index.js
import React from 'react'
import { render } from 'react-dom'

$(() => {
  window.components = {}

  window.loadComponent = componentKey =>
    fetch(`/components/${ componentKey }`)
      .then(response => response.text())
      .then(text => {
        window.components[componentKey] = eval(text)
        render(window.components[componentKey],
          document.getElementById(`anchor-${ componentKey }`))
})

更好的方法将使用Redux方法来确保真相的唯一来源和单向数据工作流原理

解决方案2 在这里，我们使用简单的呈现逻辑封装了组件

现在可以使用<script>标签在您的DOM中链接该组件

// fragment-bundle.js
import React from 'react'
import { render } from 'react-dom'
import Fragment from './Fragment/Fragment'

render(<Fragment/>, document.getElementById('anchor-fragment'))

如何使用jquery load加载React jsx？

3 个答案: