在React中使用HTML占位符

问题描述

我通过Gatsby从CMS抓取内容。标记内有占位符，应将其替换为React元素。

所以我得到了这样的东西：

let content = '<span>Hello World [placeholder]!</span>';

在React中，我想将其更改为sth（其中工具提示的标记来自React元素）：

let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';

带有替换元素的最终html应该使用危险地设置为InnerHTML来转储到DOM中。

我尝试使用react-string-replace：

reactStringReplace(content,'[placeholder]',() => (<Tooltip />));

但是它给了我一个包含字符串和React元素混合的数组，在不破坏HTML结构的情况下是无法实现的。

什么是解决此问题的好方法？还是我完全在CMS中使用占位符？

解决方法

我发现了一个非常好的npm软件包，它提供了此功能以及更多功能：https://interweave.dev/