Как разобрать смешанный контент в компоненты 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) в свой собственный компонент 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} />))