通过 AJAX 响应插入 HTML 和 React JS答案

【问题标题】：Insert HTML and React JS by AJAX response通过 AJAX 响应插入 HTML 和 React JS
【发布时间】：2021-10-11 06:56:06
【问题描述】：

我正在尝试从具有 React JS 的页面向正文插入 ajax 响应。

页面只有下面的div和script标签；

<div data-react-class="example" data-react-props="{}" data-react-cache-id="example-0" class="example"></div>
<script type="text/javascript" src="/packs/js/application.js"></script>

我尝试了 document.body.append、document.write、document.body.innerHTML +=... 或单独插入 div 和脚本，但未初始化 React 组件。我尝试插入代码但 React JS 未激活的所有方法。

我为脚本尝试了 setTimeout，但没有任何改变。虽然当我打开没有 ajax 的页面时，它会按预期工作。

我错过了什么？

如何在使用 javascript 插入页面后初始化 React JS。

代码示例：https://codesandbox.io/embed/awesome-roentgen-q9m0b

无需 ajax 即可工作：https://q9m0b.csb.app/src/get-ajax-page.html

但如果我使用 ajax 插入则不会初始化：https://q9m0b.csb.app/

【问题讨论】：

标签： reactjs ajax

【解决方案1】：

你需要做document.body.innerHTML+=(<your ajax response>). 我已经添加了你想要实现的模拟版本。使用此代码的 div 渲染良好

https://codesandbox.io/s/react-playground-forked-h5g57?file=/index.js

【讨论】：

我为您创建了一个示例。这是反应页面工作：q9m0b.csb.app/src/get-ajax-page.html 这个页面是 index.html 插入 ajax：q9m0b.csb.app 你能解决这个用法吗？
首先，我建议您将您的方法添加到原始问题中，因为从问题本身并不清楚您要做什么。第二件事是你不能直接将 ES6 模块文件（react-components.js）插入到你的 html 文件中。当您构建 React 文件时，这些文件实际上会被编译并转换为纯 js。所以你的 react-components.js 必须是纯 js 才能达到预期的效果。所以用纯js编写你的文件并修改方法
我自己用 webpacker 编译的 javascript 文件。这不是问题。我不知道codeandbox.io 是如何工作的。我试图创建一个与我的问题类似的示例。