React：在动态加载的 HTML 中注入组件的最佳方法？

Question

我是 React 新手（我更轻松地使用 jQuery 或 AngularJS）。我有一个特殊的情况，我没有找到好的方法来解决它......

我的应用程序包含一个类似于“文档查看器”的区域。它从后端加载 HTML 内容（通过 API，使用 Fetch）并将其注入“查看器”组件中。加载的 HTML 内容看起来像一份“大学报告”（它只是一个格式化文本，仅<span>包含<p>属性class="..."，仅此而已）。前任 ：<p>Lorem ispum <span>some text</span> loreb bis <span>ipsum</span></p> ...

我加载内容，并以这种方式将其注入到render()我的组件中<Viewer>： <div dangerouslySetInnerHTML={ getFreshlyLoadedHTML() } />

很简单，效果很好！

但是...现在，我想在加载的 HTML 中注入一些“交互式”组件。例如，一些提供反馈的按钮等。API 必须决定将组件放置在格式化文本 (HTML) 的单词/节点之间的位置。
前任 ： <p> Lorem ispum <span>some text</span> loreb bis <span>ipsum</span> <MyFeedbackButton paragraph="1.3"/> </p><p>Other Lorem Ipsum<p><span>...</span>

在那里，我陷入了困境，因为dangerouslySetInnerHTML如果加载的 HTML 中有组件，我就无法使用...

第一次尝试：我尝试修改 API，并且不是将字符串中的 HTML 发送到应用程序，而是发送一个自定义 JSON 结构，该结构几乎代表了我想要的最终 JSX 结构。然后，在我的 React 页面中，渲染函数只需解析 JSON 并构建 JSX（如果不清楚，请使用 JsFiddle 示例：https: //jsfiddle.net/damienfa/69z2wepo/34536/）

它有效，但我不敢相信这是个好方法......

我看到一个主要问题：我从渲染函数构建的所有 HTML 节点（span、p...）都被 ReactJs 引用，这真的有必要吗？大多数情况下，存在“死”节点（我的意思是，dom 节点永远不会改变，这是静态格式的文本）。

只要看一下节点上所有那些永远不会交互的“data-reactid”......

您对此案有何建议？

我尝试使用 API 发送的 JSON 结构怎么样？

有没有办法说“不要引用该元素”？

您是否清楚地看到了解决我的问题的更好方法？

Answer 1

您当前的工作流程不是很安全，容易出现许多潜在的错误和敞开的大门，特别是在代码注入方面......

由于 React 跟踪节点而导致的过载不是问题，React 可以跟踪 10 000 个节点并且不会出现问题（实际上，在我的许多应用程序中，React 有超过 100 000 个节点需要关心，并且仍然完美运行）。

我在这里看到不同的解决方案：

1. 如果动态组件和顺序只有 3 或 4 种可能性，您可能会拥有像“模板”这样的组件，您可以简单地向其发送文本参数。这是最安全、最简单的选择。
2. 如果它不适合您的用例，但 JSON 文件只能包含一组有限的组件，则这些组件应位于您的主应用程序中，然后使用 JSON 中的自定义属性进行渲染。实际上，考虑到数据结构，您可以考虑使用 xml 而不是 json，并构建一个可解析和渲染的 xml 树。只有白名单中的组件才会被渲染，这将极大地限制潜在的安全问题。不过，如果需要对 XML 解析器进行大量工作。
3. 如果 JSON 文件可以包含许多不同且不可预测的组件，或者如果这些组件的行为在很大程度上是动态的并且独立于您的应用程序，那么您不妨考虑使用 iframe，具有自己的 JS 和 HTML，以便这部分内容代码与其余代码隔离。