如何使用 React 显示包含 HTML 的句子？ [复制]

Posted 2023-02-22

【中文标题】如何使用 React 显示包含 HTML 的句子？ [复制]

【英文标题】：How to display a sentence containing HTML throughout with React? [duplicate]

【发布时间】：2021-02-26 03:50:43

【问题描述】：

我正在使用 react 构建，我想显示从 get 请求返回给用户的 JSON 数据。 JSON 数据包含由句子组成的字符串值，其中 html 出现在句子中。例如：

[ "sentence" : "Don't look at the <span> sun </span> directly with your <span>eye</span>s, it's <span>risk</span>y!"]

我的目标是让文本正常呈现，但字符串中的 html 与文本一起呈现为 html，从而允许我操作 html，以便我可以使用 CSS 突出显示句子中的特定单词。目前我只是从 get 请求中获取数据，将其保存到 state 并像平常一样通过 props 显示。

return (
    <div>props.data.sentence</div>
);

但是，如果我从我的 props 中获取此值并尝试将其直接包含在视图中，它只会将整个内容显示为字符串，从而向用户显示实际的 HTML 代码。

谁能告诉我如何在 React 中显示这种字符串 + html 组合？

【问题讨论】：

在执行此操作之前，请阅读有关 XSS 和基于 DOM 的 XSS 的信息。您可能还想看看DOMPurify

【参考方案1】：

使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML= __html: props.data.sentence></div>

【讨论】：

仅供参考，您问题中的数据是数组，因此您可能需要指出 data[0].sentence