如何将混合内容解析为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} />))