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

时间:2018-04-05 05:56:16

标签: javascript reactjs

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

我需要:

  1. 将此内容渲染为标准HTML(即应用了样式)
  2. 解析内容以查看内容中的部分是否包含" accept-comments"标记并显示"评论"
  3. 部分旁边的按钮

    例如,如果我收到下面的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>
    

    问题:

    1. 解析和呈现HTML的最有效方法是什么,因为内容有点大,有时接近1MB?
    2. 如何确保React不会重新呈现此组件,因为它不会更新?我假设总是回归&#34;假&#34;来自shouldComponentUpdate()。
    3. 我尝试的事情:

      1. 使用&#34; dangerouslySetInnerHTML&#34;呈现HTML或&#34; react-html-parser&#34;。使用此选项,无法解析&#34; accept-comments&#34;部分。
      2. 使用DOMParser()。parseFromString来解析内容。如何在React组件中将其输出呈现为HTML? 1MB +内容会有效吗?

1 个答案:

答案 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"));