如何用 jquery 加载 React jsx？

Question

我有一个文件（master）调用另一个文件（loaded） 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 加载它的 "page fragments"，我需要在该片段中呈现一个 React 组件.

Answer 1

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

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

Answer 2

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

安装 React 工具

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

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

Answer 3

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

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

阅读关于获取和评估动态加载脚本的第一句话和关于插入<script>标签指向 self-running 组件（见后，解决方案 2）

解决方案一：

// 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 方法来确保单一事实来源和 one-way 数据工作流 原则

解决方案 2 这里我们用一个简单的渲染逻辑封装我们的组件

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

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

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

如何用 jquery 加载 React jsx？

How to load React jsx with jquery load?

ajax

jquery

reactjs