渲染保存在后端並從后端返回的 HTML？

Question

我正在做一個項目，我從后端取回一個字符串，其中包含一些 html。 我現在想把這個 html 放入gatsby ：

let htmlFromBackend = `<b>Hello there</b>, partner!`

return (
  <div>
   {htmlFromBackend}
  </div>
)

但是，這會將 html 打印為純文本，所以我在屏幕上看到的字面意思是：

<b> Hello there</b>, partner!

而它應該是

你好，伙伴！

如何將其呈現為正確的 html？

Answer 1

您可以使用dangerouslySetInnerHTML但請確保您信任來自后端的數據，因為您無法獲得任何免受XSS 攻擊的保護。

let htmlFromBackend = `<b>Hello there</b>, partner!`

return (
  <div dangerouslySetInnerHTML={{ __html: htmlFromBackend }} />
)

Answer 2

您可以使用useRef掛鈎並設置元素的innerHTML ：

  const ref = useRef(null);

  useEffect(() => {
    let htmlFromBackend = `<b>Hello there</b>, partner!`;
    ref.current.innerHTML = htmlFromBackend;
  }, []);

  return <div ref={ref} />;

Answer 3

安裝 html-react-parser

npm i html-react-parser;

並且在組件中

import Parser from 'html-react-parser';

let htmlFromBackend = `<b>Hello there</b>, partner!`

return (
  <div>
   {Parser((htmlFromBackend)}
  </div>
)