时间戳

首页 > 解决方案 > 将 JSON 解析为 HTML

javascript - 将 JSON 解析为 HTML

问题描述

我正在从 API 获取数据，数据的属性之一是对项目的描述，但JSON响应是用 编写的HTML，并且其中包含<a></a>标签和其他 html 元素。我不想显示标签并让它们实际工作。

例如，这是它在屏幕上的输出：

“这里是<a href='https://www.google.com'> Link </a>”

这应该是这样的：

“链接在这里 ”

我怎样才能做到这一点？

（我正在使用 Next.js）

这就是我显示数据的方式

<p>{description}</p>

标签： javascripthtmlreactjsjsonparsing

解决方案

下面试试。dangerouslySetInnerHTML是JSX您需要的属性。

<p dangerouslySetInnerHTML={{ __html: description }}></p>

查看文档以获取更多信息

工作示例 

function App() {

  const description = "Here is the <a href='https://www.google.com'> Link </a>"; 

  return (
    <p dangerouslySetInnerHTML={{ __html: description }}></p>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读