是否可以在不使用 dangerouslySetInnerHtml 的情况下渲染 HTML答案

【问题标题】：Is it possible to render HTML in react without using dangerouslySetInnerHtml是否可以在不使用 dangerouslySetInnerHtml 的情况下渲染 HTML
【发布时间】：2021-09-16 09:03:43
【问题描述】：

长话短说，我有包含 HTML 的字符串，这些字符串是在从安全服务器进行生产构建之前下载的。我们使用的框架是 React with Gatsby，通常您只需执行以下操作：

<div dangerouslySetInnerHTML={{__html: '<p>My Stuff</p>'}}></div>

这很好用，主要问题是出于 SEO 目的，我们希望将 html 编译成 html 而不是用 Javascript 呈现。

既然它已经是 HTML，有没有办法可以禁用 react 内部的保护，这样这些字符串就不会在默认情况下被转义并成为生产构建中的常规 HTML？

【问题讨论】：

也许你可以在这里找到一些有用的信息stackoverflow.com/questions/44643424/…
你渲染的是在服务器还是在客户端？
在客户端@CharlesBamford
@RadenKriting 我读过这篇文章，但它并没有解决我的问题。它仍然需要 javascript 来加载我的字符串并将其呈现为 html，因为 react 会对其进行转义。
当您构建 Gatsby 站点时，所有页面都是服务器端生成的，因此它将“变成”html。在禁用 js 的情况下检查您的页面，以查看服务器端生成的页面的结果。

标签： javascript html reactjs

【解决方案1】：

实际上没有，不。区分 .jsx 文件中的 <div> 和 html 中的 <div> 很重要。如果您查看 jsx 的编译输出，它将揭示真正发生了什么。如果你编译一个包含<div>Hello world</div> 的反应组件，你会得到一个类似_react.createElement("div", null, "Hello world") 的函数调用。放入 div 主体的任何内容也将作为 JSX 元素插入其中。 dangerouslySetInnerHtml 属性用来告诉 React 该值是你信任的实际 html。但是，即使有除 dangerouslySetInnerHtml 之外的选项，我也不相信它会解决您的问题，因为您的反应中的任何内容都必须等待客户端渲染。

现在，我不是 SEO 专家，但如果在呈现之前在页面上显示内容至关重要，您可以将原始 html 发送到隐藏元素中。如果你的原始标记有<div id="app">Some seo stuff</div>，React 会在渲染时替换 div 的内容。

【讨论】：

【解决方案2】：

var stringToHTML = function(htmlContent) {
  var dom = document.getElementById('integrationMessage');
  dom.innerHTML = htmlContent;
  return dom;
};
stringToHTML(res.data.message);
<div id = "integrationMessage"></div>

【讨论】：

您好，欢迎来到 SO，尝试扩展您的答案添加一些解释