如何使用 jquery 加载 React jsx？答案

【问题标题】：How to load React jsx with jquery load?如何使用 jquery 加载 React jsx？
【发布时间】：2015-07-01 19:54:26
【问题描述】：

我有一个文件（主文件）调用另一个文件（加载）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“代码”注入容器？您是否尝试在容器内渲染 React 组件？另外，您提供的代码示例不是 JSX。
@David 确切地说，我正在尝试在容器内渲染一个 React 组件，该容器加载了 jquery 负载。我已经编辑了原始问题。可以 console.log("REACT WORKS");在 jsx 有什么问题吗？
您应该预编译 JSX 文件，然后将 React.render 与特定目标元素一起使用（如果您愿意，可以通过 jQuery 选择）。即时编译它们会表现不佳，并导致客户端不必要的“忙碌工作”。
@WiredPrairie 这似乎是一个解决方案，我的工作流程可能完全是错误的（以为我会在部署时编译所有内容）。

标签： jquery ajax reactjs

【解决方案1】：

不知道你想在这里做什么，但是 JSX 转换器带有一个转换方法，所以你可以尝试如下：

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

【讨论】：

我如何获得对 JSX 的引用？

【解决方案2】：

这样的工作流程似乎不适用于 React。更好的方法是（例如）：

安装反应工具

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

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

【讨论】：

是的，这对于 React 来说是一个更好的解决方案。
您可能只想在某些条件下加载重型组件

【解决方案3】：

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

我建议您在应用程序的顶部构建一个非 React 程序来管理您的片段

阅读this post第一句关于获取和评估使用动态加载的脚本和关于插入指向自运行组件的<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'))

【讨论】：