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

Question

我是React的新手（我更轻松地使用jQuery或AngularJS）。我有一个特例，我找不到解决问题的好办法......

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

我加载内容，并以这种方式将其注入我的组件render()的{​​{1}}： <Viewer>

简单，它工作得很好！

但是......现在，我想在加载的HTML中注入一些“交互式”组件。例如，一些按钮提供反馈等.API必须决定将组件放在格式化文本（HTML）的单词/节点之间的位置。
例如： <div dangerouslySetInnerHTML={ getFreshlyLoadedHTML() } />

在那里，我被困了，因为如果加载的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> ...

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

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

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

只看一下那些永远不会互动的节点上的所有“数据重新”...

您对此案有何建议？

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

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

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

Answer 1

您当前的工作流程不是很安全，并且容易受到许多潜在错误和打开，特别是关于代码注入......

由于反应跟踪节点引起的过载不是问题，React可以追踪10 000个节点并且没有问题（实际上我的许多应用程序实际上已经有超过10万个节点需要关注并且它仍然完美无缺）。

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

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