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 ）沿<Tag content={content} />的行放入其自己的React组件。

我如何能够解析出该组件，然后将所有片段串联在一起？

谢谢！

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

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

1 个答案: