在 React 中使用 HTML 占位符
Using HTML placeholders in React
我通过 Gatsby 从 CMS 抓取内容。标记内有占位符，应将其替换为 React 元素。
所以我得到这样的东西：
let content = '<span>Hello World [placeholder]!</span>';
在 React 中，我想将其更改为这样的东西（工具提示的标记来自 React 元素）：
let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';
应使用 dangerouslySetInnerHTML.
将带有替换元素的最终 html 转储到 DOM 中
我尝试使用 react-string-replace:
reactStringReplace(content, '[placeholder]', () => (<Tooltip />));
但它给了我一个包含字符串和 React 元素的混合数组，如果不破坏 HTML 结构就无法合并这些元素。
解决这个问题的好方法是什么？还是我在 CMS 中完全使用占位符是错误的？
我找到了一个非常好的 npm 包，它提供了这个功能以及更多：https://interweave.dev/
我通过 Gatsby 从 CMS 抓取内容。标记内有占位符，应将其替换为 React 元素。
所以我得到这样的东西：
let content = '<span>Hello World [placeholder]!</span>';
在 React 中，我想将其更改为这样的东西（工具提示的标记来自 React 元素）：
let content = '<span>Hello World <div class="tooltip">Important warning</div>!</span>';
应使用 dangerouslySetInnerHTML.
将带有替换元素的最终 html 转储到 DOM 中我尝试使用 react-string-replace:
reactStringReplace(content, '[placeholder]', () => (<Tooltip />));
但它给了我一个包含字符串和 React 元素的混合数组，如果不破坏 HTML 结构就无法合并这些元素。
解决这个问题的好方法是什么？还是我在 CMS 中完全使用占位符是错误的？
我找到了一个非常好的 npm 包，它提供了这个功能以及更多：https://interweave.dev/