将 JSON 解析为 HTML

Question

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

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

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

它应该是这样的：

"这里是Link"

我怎样才能做到这一点？

（我用的是Next.js）

这就是我显示数据的方式

<p>{description}</p>

Answer 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>

将 JSON 解析为 HTML

Parsing JSON into HTML

html

javascript

parsing

json

reactjs