ReactJS -在div内的字符串中解析HTML标签并在UI中显示

Question

我在render()函数中有一个div，如下所示，其中输出是一个自定义对象

{output.text.split("-").map(res => 
<div>{res}</div>                                     
)}

现在res字符串可能有也可能没有HTML元素。如果它有html元素，它应该相应地显示在UI

中。例如:如果res的值为Please click the link <a href="url">here</a>，则在UI中应该显示如下，

请点击这里的链接

Answer 1

您可以使用html-react-parser库来满足您的需求。

import "./styles.css";
import  parse  from "html-react-parser";
import React from "react";
export default function App() {
const [output, setOutput] = React.useState({
text: "test-Please click <a href='https://google.com'>here</a>"
});
return (
<div className="App">
{output.text.split("-").map((res) => {
return <div>{parse(res)}</div>;
})}
</div>
);
}

Answer 2

您可以尝试这样使用DOMParser:

{output.text.split("-").map(res => 
<div>{new DOMParser().parseFromString(res, "text/xml")}</div>
)}

如果需要更多的信息，请告诉我。谢谢你。