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

Question

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

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

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

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

标签： javascripthtmlreactjs

Answer 1

实际上不，不。<div>将 .jsx 文件中的 a<div>与 html中的 a区分开来很重要。如果您查看 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 的内容。