0

我通过 Gatsby 从 CMS 中获取内容。标记内部有占位符，应该用 React 元素替换。

所以我得到这样的东西：

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

在 React 中我想把它改成这样（工具提示的标记来自 React 元素）：

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

带有替换元素的最终 html 应该使用危险的 SetInnerHTML 转储到 DOM 中。

我尝试使用react-string-replace：

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

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

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

4

1 回答 1

0

我发现了一个非常好的 npm 包，它提供了这个功能等等：https ://interweave.dev/

于 2020-09-29T06:57:58.657 回答