React - 在第二个和第三个 <p> 标签之间插入图像答案

【问题标题】：React - Insert an image between the 2nd and 3rd <p> tagReact - 在第二个和第三个 <p> 标签之间插入图像
【发布时间】：2023-02-02 05:34:31
【问题描述】：

我有一个 React 组件

<Text>
   <div dangerouslySetInnerHTML={{ __html: apiContent}} />
</Text>

显示来自 API 的 HTML，可能如下所示：

<div>
  <p>text</p>
  <p>more text</p>
  <p>more text</p>
  <p>more text</p>
  <p>still more text</p>
</div>

如何在第二个和第三个 p 标签之间插入一个图像，这是另一个 React 组件？

我知道如何在 vanilla JS 中做到这一点，但在 React 方式中却遇到了麻烦。

【问题讨论】：

您如何呈现来自 API 的 HTML？
还有你要插入的图片，它只是一些 HTML 还是一个 React 组件？

标签： reactjs

【解决方案1】：

我很想知道其他答案，但我觉得在一些原始 HTML 中插入 React 组件几乎是不可能的。我能想到的选项是：

使用一些库将原始 HTML 转换为 React 组件树，希望这个库也将包含一种在特定位置注入自定义组件的方法（我不知道任何这样的库，但可能有一个）
编辑原始 HTML 以在您需要的位置插入一个具有唯一 ID 的空容器（例如，通过将 HTML 解析为 DocumentFragment，使用 vanilla JS 插入一个 div，将其转回字符串，并设置它像你已经做的那样作为 innerHTML），然后使用 React 门户将 React 组件注入到该容器中。很乱...

【讨论】：

【解决方案2】：

如果它是一个反应组件那么它不是网页格式所以把它放在里面不合逻辑dangerouslySetInnerHTML标签。您需要将此反应组件重写为 HTML 字符串，并使用来自 API 的 html 作为字符串。这意味着您可以在第二个上拆分传入的 html 字符串关闭 p 标签并在中间添加新的 html 字符串。

【讨论】：