我正在编写一个基于React的应用程序,其中一个组件将其HTML内容作为props中的字符串字段接收。此内容由API调用返回。
我需要:
例如,如果我收到下面的HTML,我应该显示"评论" ID为" s101"。
的部分旁边的按钮<html>
<head/>
<body>
<div id="content">
<section id="s101" accept-comments="true">Some text that needs comments</section>
<section id="s102">Some text that doesn't need comments</section>
</div>
</body>
</html>
问题:
我尝试的事情:
答案 0 :(得分:0)
这个答案来自评论中Chris G的代码。我使用了不同大小的文档代码,效果很好。谢谢Chris G!
在此处发布代码,以防评论中的链接link中断。
该解决方案使用DOMParser来解析API调用提供的HTML内容,并对其进行扫描以查找应包含“注释”按钮的内容。以下是相关部分。
import React from "react";
import { render } from "react-dom";
const HTML =
"<div><section but='yes'>Section 1</section><section>Section 2</section></div>";
class DOMTest extends React.Component {
constructor(props) {
super(props);
const doc = new DOMParser().parseFromString(HTML, "application/xml");
const htmlSections = doc.childNodes[0].childNodes;
this.sections = Object.keys(htmlSections).map((key, i) => {
let el = htmlSections[key];
let contents = [<p>{el.innerHTML}</p>];
if (el.hasAttribute("but")) contents.push(<button>Comment</button>);
return <div key={i}>{contents}</div>;
});
}
render() {
return <div>{this.sections}</div>;
}
}
const App = () => (
<div>
<DOMTest />
</div>
);
render(<App />, document.getElementById("root"));