Javascript 呈现保存在中并从后端返回的HTML？

我正在做一个项目，从后端返回一个字符串，其中包含一些html。我现在想把这个html放到盖茨比的

gatsby

：

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

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

让htmlfrombend=`你好，伙伴`
返回(
{htmlFromBackend}
)

但是，这会将html打印为纯文本，因此我在屏幕上看到的是：

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

你好，搭档！

然而它应该是

你好，伙伴

---

如何将其呈现为正确的html？

安装html react解析器

npm i html-react-parser;

和在组件中

import Parser from 'html-react-parser';

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

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

从“html反应解析器”导入解析器；
让htmlFromBackend=`你好，伙伴`
返回(
{解析器（（htmlFromBackend）}
)

安装html反应解析器

npm i html-react-parser;

和在组件中

import Parser from 'html-react-parser';

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

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

从“html反应解析器”导入解析器；
让htmlFromBackend=`你好，伙伴`
返回(
{解析器（（htmlFromBackend）}
)

您可以使用，但是请确保您信任来自后端的数据，因为您不会从中获得任何保护

让htmlfrombend=`你好，伙伴`
返回(
)

您可以使用，但是请确保您信任来自后端的数据，因为您不会从中获得任何保护

让htmlfrombend=`你好，伙伴`
返回(
)

您可以使用

useRef

hook并设置元素的

innerHTML

：

  const ref = useRef(null);

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

  return <div ref={ref} />;

const ref=useRef（null）；
useffect（（）=>{
让htmlFromBackend=`你好，搭档！`；
ref.current.innerHTML=htmlFromBackend；
}, []);
返回；

您可以使用

useRef

hook并设置元素的

innerHTML

：

  const ref = useRef(null);

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

  return <div ref={ref} />;

const ref=useRef（null）；
useffect（（）=>{
让htmlFromBackend=`你好，搭档！`；
ref.current.innerHTML=htmlFromBackend；
}, []);
返回；

非常感谢。使用

html反应解析器

比

危险的setinenerhtml

有优势吗（另一个答案）？在您的情况下，没有任何理由使用额外的包，而且它是一个解析器，不仅是dom解析器，而且是react解析器-一个巨大的滥杀滥伤imho。而

危险的html

只是将html放在一个div中，就像需要的一样。我认为如果您想要呈现自定义组件，您只想使用html react解析器（例如，您不想使用自定义样式/状态/行为来呈现您自己的组件）。仅呈现普通HTML，我同意HTML react解析器有点过头了。非常感谢。使用

HTML react解析器

是否比

DangerlySetinerHTML

有优势（另一个答案）？在您的情况下，没有任何理由使用额外的包，而且它是一个解析器，不仅是dom解析器，而且是react解析器-一个巨大的滥杀滥伤imho。而

危险的html

只是将html放在一个div中，就像需要的一样。我认为如果您想要呈现自定义组件，您只想使用html react解析器（例如，您不想使用自定义样式/状态/行为来呈现自己的组件）。对于仅呈现普通HTML，我同意HTML react解析器有点过分。