时间戳

首页 > 解决方案 > 如何使用 React 显示包含 HTML 的句子？

javascript - 如何使用 React 显示包含 HTML 的句子？

问题描述

我正在使用 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 突出显示句子中的特定单词。目前我只是从获取请求中获取数据，将其保存到状态并像平常一样通过道具显示。

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

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

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

标签： javascripthtmlreactjsstring-interpolation

解决方案

危险地使用SetInnerHTML

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

推荐阅读