Question

我正在编写一个基于React的应用程序，其中一个组件将其HTML内容作为props中的字符串字段接收。此内容由API调用返回。

我需要：

将此内容渲染为标准HTML（即应用了样式）
解析内容以查看内容中的部分是否包含＆＃34; accept-comments＆＃34;标记并显示＆＃34;评论＆＃34;

例如，如果我收到下面的HTML，我应该显示＆＃34;评论＆＃34; ID为＆＃34; s101＆＃34;。

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

问题：

解析和呈现HTML的最有效方法是什么，因为内容有点大，有时接近1MB？
如何确保React不会重新呈现此组件，因为它不会更新？我假设总是回归＆＃34;假＆＃34;来自shouldComponentUpdate（）。

我尝试的事情：

使用＆＃34; dangerouslySetInnerHTML＆＃34;呈现HTML或＆＃34; react-html-parser＆＃34;。使用此选项，无法解析＆＃34; accept-comments＆＃34;部分。
使用DOMParser（）。parseFromString来解析内容。如何在React组件中将其输出呈现为HTML？ 1MB +内容会有效吗？

Answer 1

这个答案来自评论中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"));

在React组件中解析和渲染外部HTML

1 个答案: