在react js上设置json-html

Question

我得到了一个JSON格式的some数组。我需要呈现该内容。如何在不使用任何包或setDangerous方法的情况下将JSON转换为普通HTML元素？

let data = [
"John Doe Interests are",
"<ul>n <li>n a) Football </li>n  <li>b) Hockey</li>n</ul>",
"Good"
]

它应该是这样的：

ul {
list-style: none
}

John Doe Interests are
<ul>
<li>Football</li>
<li>Hockey</li>
</ul>
Good

Answer 1

使用这些软件包可以很容易地做到这一点。不再需要使用dangerouslySetInnerHTML。

• dompurify-净化HTML
• React HTML Parser-将HTML字符串转换为React组件

data.json

[
"John Doe Interests are",
"<ul>n <li>n a) Football </li>n  <li>b) Hockey</li>n</ul>",
"Good"
]

App.js

import DOMPurify from "dompurify";
import ReactHtmlParser from "react-html-parser";
import data from "./data.json";
function App() {
return (
<>{data.map((content) => ReactHtmlParser(DOMPurify.sanitize(content)))}</>
);
}
export default App;

https://codesandbox.io/s/json-to-react-f0rgj?file=/src/App.js

如果您需要进一步的支持，请告诉我。