使用变量时 ReactangerlySetInnerHTML 不起作用

Question

我正在使用 React 创建一个 SPA，用于搜索数据并显示结果。每个结果都遵循以下模型

{
  "title": "A Title",
  "body": " <li>escaped html <strong>that sould be rendered</strong>.</li>
    </ul>"
}

该body属性始终是应该在组件中呈现的转义 html。该组件如下所示：

代码

function SearchResult({ title, body, favourite }) {
  return (
    <article className="SearchResult">
    <section>
      <i className={`icon-star${favourite ? ' marked' : ''}`} />
      {title}
    </section>
    <section
      dangerouslySetInnerHTML={{ __html: body }}
      className="SearchResult-body"
    />
  </article>
  );
}

但每个结果的正文没有正确呈现，而是将 html 显示为文本

问题是，只有当我创建将变量传递给body属性的组件时才会发生这种情况

results.map((result, index) => (
      <SearchResult key={index} title={result.title} body={result.body} />
    ))

但如果我这样做，效果很好

<SearchResult
    title="A title"
    body=" &lt;li&gt;escaped html&amp;nbsp;&lt;strong&gt;that sould be rendered&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;"
  />

为什么会有所不同？在使用固定值时默认添加的属性中传递该值之前，是否应该添加任何预处理？

演示

可以在此处查看此问题的演示

Answer 1

似乎只有当您给它提供转义的 html 时才会出现此问题。

@sergiotapia实现的解决方案涉及创建一个辅助函数来转义 html 字符串以使其正常工作。

htmlDecode(content) {
  let e = document.createElement('div');
  e.innerHTML = content;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

<section
  dangerouslySetInnerHTML={{ __html: htmlDecode(body) }}
  className="SearchResult-body"
/>

然而，正如@brigand提到的，我将引用“取消转义它可能会导致 XSS 攻击和不正确的渲染。 ”所以这可能不是完美的解决方案。

请参阅工作示例