Как разобрать смешанный контент в компоненты React?

Question

Я принимаю контент из API, который отправляет через 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} />.

Как бы я мог разобрать этот компонент, а затем объединить все части вместе?

Спасибо!

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