转义的HTML标记正在危险地设置为InnerHTML？

Question

我有一个Gatsby + WP API博客设置（启用了Markdown），并且运行良好，除非我试图将HTML标记显示为代码片段。我使用的是转义字符（请参见下文），但是出于某些原因，<code> / <pre>标记内的HTML呈现为实际的HTML，而不是显示为HTML代码段。

我知道这是dangerouslySetInnerHTML的工作，但是我不认为如果我使用转义字符<会是什么？

这是WP博客文章中的标记。

<pre class="language-markup"><code>
  &lt;div&gt;
    &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt;
</code></pre>

这就是我如何在react组件中显示整个帖子内容...

<section className="article-body" itemProp="articleBody"
  dangerouslySetInnerHTML={{ __html: this.props.html }}
/>

<div>和<p>标签呈现为HTML，而不是显示为代码段。

还有其他方法可以执行此操作吗？为了记录，我还使用“非危险”方法（react-render-html）进行了尝试，结果相同。

-更新：-

通过将<code>标记替换为<xmp>，我能够将HTML显示为代码段。我知道这个标签已不再得到正式支持，而且远非优雅，因此，我认为我可以尝试将代码段与其余内容分开，如下所示。

Answer 1

我也在CodeSandbox中尝试过-可以正常工作。如果您确定从WP API接收到的数据（转义），我认为这是一个盖茨比问题。必须在某个地方对其进行修改（未转义）。

如果数据尚可，并且您不想进行深入调查，则可能有解决方法。拆分文章正文，并分别对待各节-文本和代码段。带有第二个代码字面量的第二个换行是这样的：

const CodeBlock = (props) => {
  return <section className="article-code">
    <pre className="language"><code>{`${props.html}`}</code></pre>
  </section>
}

当然要删除未使用的原始代码/代码段的第一行和最后一行。