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

我从一个API中摄取内容，该API通过HTML发送，HTML也有第三方模板标记。例如：

标题
这是一些内容

[Tag]其他内容[/Tag]
更多的随机内容

如果没有模板标记，我可以将所有内容通过

危险的setinerHTML

，但是我希望能够将

[Tag]…[/Tag]

（方括号，而不是HTML）中的内容按照

的思路分离到自己的React组件中

我怎样才能解析出那个组件，同时将所有的片段连接在一起呢

---

谢谢大家!

对于这种情况，我认为您可以使用

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

从'react dom/server'导入{renderToString}
...
const template=`Title
这是一些内容

[Tag]其他内容[/Tag]
更多随机内容。
`
const html=template.replace（/\[Tag\].+\[\/Tag\]/，renderToString（））

在SO上讨论了从字符串进行渲染。请参见示例。可在浏览器中使用，为其提供一个快照。非常感谢。