如何將混合內容解析為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} />))