如何在我的 React js 页面中显示来自 json 数据的 html 代码？

Question

我在 React js 应用程序中创建了一个组件，它使用 fetch 调用 api 并获取一些 json 数据，如下所示。我怎样才能在我自己的html代码中按原样显示json数据中的html？

   data = {
              duration : "1", 
              html : "<div><p>some message here</p><p> more text here <span> styled text <span><p></div>"
          }

Answer 1

首先你应该使用一个包 html-react-parser

npm i html-react-parser

然后

import parse from 'html-react-parser'
const yourHtmlString = '<h1 >Hello</h1>' // it's mean your data state html field

像这样打电话之后

 <div>
    {parse(yourHtmlString)}
</div>

您还可以在这个问题中找到有关此问题的更多详细信息

在 React 组件中将 HTML 字符串渲染为真实的 HTML