javascript - 如何将混合内容解析为React组件？

Question

我正在从一个 API 中获取内容，该 API 通过 HTML 发送，该 HTML 也包含第三方模板标签。一个例子可以是:

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

如果没有模板标签，我可以将所有内容都放入 dangerouslySetInnerHTML ，但是我希望能够分离 [Tag]...[/Tag] 内的内容(方括号，不是 HTML)到它自己的 React 组件中，沿着 <Tag content={content} /> 的行.

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

谢谢!

Answer 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} />))