如何将混合内容解析为 React 组件？答案

【问题标题】：How to parse mixed content into React components?如何将混合内容解析为 React 组件？
【发布时间】：2019-06-13 14:41:34
【问题描述】：

我正在从一个通过 HTML 发送的 API 提取内容，该 HTML 也具有第三方模板标签。一个例子可能是：

<h1>Title<h1>
<p>This is some content.</p>
[Tag]Other content[/Tag]
<p>More random content.</p>

如果不是模板标签，我可以将所有内容都放在dangerouslySetInnerHTML，但是我希望能够将[Tag]...[/Tag]（方括号，而不是HTML）中的内容分成自己的内容按照<Tag content={content} /> 的方式进行 React 组件。

我如何能够解析出该组件，然后将所有部分连接在一起？

谢谢！

【问题讨论】：

在 SO 上讨论了从字符串渲染。例如，请参阅stackoverflow.com/questions/45645424/…。

标签： javascript html reactjs parsing react-component

【解决方案1】：

我认为您可以在这种情况下使用renderToString

import { renderToString } from 'react-dom/server'
...
const template = `<h1>Title<h1>
<p>This is some content.</p>
[Tag]Other content[/Tag]
<p>More random content.</p>`

const html = template.replace(/\[Tag\].+\[\/Tag\]/, renderToString(<Tag content={content} />))

【讨论】：

在浏览器中可用，试一试。谢谢！