将 JSON 解析为 HTML

【问题标题】：Parsing JSON into HTML将 JSON 解析为 HTML
【发布时间】：2021-12-26 20:35:33
【问题描述】：

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

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

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

它应该是这样的：

“这是链接”

我怎样才能做到这一点？

（我正在使用 Next.js）

这就是我显示数据的方式

<p>{description}</p>

【问题讨论】：

标签： javascript html reactjs json parsing

【解决方案1】：

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

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

查看docs 了解更多信息

工作示例

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>

【讨论】：

@Eric Pezzulo，看看这个！！