如何在从 json 获取数据时在 React 上呈现 html 标签

Question

如何在从 json 获取数据时在 React 上渲染 HTML 标签。 在我的 json 数据中包含<h2>标签，但无法呈现<h2>标签。

这是我的代码

const [items, setItems] = useState({"data" : `"<h2>hi</h2>, this is a car"`})
return (
        <div>
          <p>{items.data}</p>
        </div>
)

output 即将推出

"<h2>hi</h2>, this is a car"

但预计 output 应该是

嗨，这是一辆车

Answer 1

您可以为此目的使用dangerouslySetInnerHTML ，从文档中阅读：

dangerouslySetInnerHTML是 React 在浏览器 DOM 中使用innerHTML的替代品。

尝试如下：

function createMarkup(data) {
  return { __html: data };
}

return <div>
    <p><div dangerouslySetInnerHTML={createMarkup(items.data)} /></p>
</div>

来自文档的重要说明：

通常，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。 因此，您可以直接从 React 设置 HTML，但您必须输入dangerouslySetInnerHTML的 SetInnerHTML 并使用__html键传递 object，以提醒自己这是危险的。

我希望这有帮助！

Answer 2

如果您的数据是 static 而不是将其设置为字符串，请将其设置为 JSX 元素，并且应该负责呈现 html

const Data = () => (<><h2>hi</h2>, this is a car</>)
const [items, setItems] = useState({data : <Data />})
return (
   <div>
     <p>{items.data}</p>
   </div>
)