如何在 DOM 上显示由 API 调用返回的 HTML 响应？

Posted 2023-02-22

【中文标题】如何在 DOM 上显示由 API 调用返回的 HTML 响应？

【英文标题】：How to display HTML response on DOM, returned by an API call?

【发布时间】：2021-07-05 23:23:34

【问题描述】：

我的 API 调用返回以下 html 响应，我想在 DOM 上将其呈现为 html 标签，而不仅仅是带有 html 标签的文本。

API 响应：<strong>Hello</strong>

如何在 DOM 上呈现：<strong>Hello</strong>

我希望它如何在 DOM 上呈现：Hello

【问题讨论】：

检查我的答案。快乐编码:)

【参考方案1】：

你应该使用dangerouslySetInnerHTML

【讨论】：

谢谢乔里斯。除此之外，我还有其他方法可以实现吗？

这是 React 推荐的方式，但您可以自己创建节点并将其添加到 dom：js const myContent = document.createElement('div'); myContent.innerHTML = "<strong>Hello</strong>"; document.body.appendChild(myContent);

【参考方案2】：

另一种方法是使用innerHTML：

var APIResponse = '<strong>Hello</strong>';
document.getElementById("target").innerHTML = APIResponse;

资源：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

【参考方案3】：

您可以使用react-html-parser

npm install react-html-parser

import React from 'react';
import ReactHtmlParser from "react-html-parser"

const htmlString = '<strong>Hello</strong>';

function App() 
  return (
    <div>
        ReactHtmlParser(htmlString)
    </div>
  );


export default App;

演示：React HTML Parser Example

【参考方案4】：

您可以使用; html-react-parser

执行以下步骤：

npm install react-html-parser
# or 
yarn add react-html-parser

导入或需要模块：

// ES Modules
import parse from 'html-react-parser';

// CommonJS
const parse = require('html-react-parser');

确保在父元素下渲染解析的相邻元素：

<>
  parse(`<strong>Hello</strong>`)
</>

编码愉快:)