我通过 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 中完全使用占位符是错误的?