8

I'm writing a React-based application where one of the components receives its HTML content as a string field in props. This content is returned by an API call.

I need to:

  1. Render this content as a standard HTML (i.e. with the styles applied)
  2. Parse the content to see if the sections within the content have "accept-comments" tag and show a "Comment" button beside the section

For example, if I receive the HTML below, I should show the "Comment" button beside section with 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>

Questions:

  1. What would be the most efficient way to parse and render the HTML as the content can get a bit large, close to 1MB at times?
  2. How can I ensure that React does not re-render this component as it will not be updated? I'd assume always return "false" from shouldComponentUpdate().

Things I've tried:

  1. Render the HTML with "dangerouslySetInnerHTML" or "react-html-parser". With this option, cannot parse the "accept-comments" sections.
  2. Use DOMParser().parseFromString to parse the content. How do I render its output in a React component as HTML? Will this be efficient with 1MB+ content?
Avi
  • 267
  • 1
  • 3
  • 11
  • So I assume it's a given that you cannot change what the API returns? –  Apr 05 '18 at 05:59
  • That's true. I cannot change what API returns. I need to work with the HTML content it returns. – Avi Apr 05 '18 at 06:06
  • Ok, so you've tried `DOMParser()`. It returns a `document`, which means you can turns its `childNodes` into elements: https://codesandbox.io/s/x9vp5452z4 –  Apr 05 '18 at 06:29
  • Thanks Chris, the code snippet is quite helpful. I will try this with one of the largish documents and update. – Avi Apr 05 '18 at 06:47

1 Answers1

11

This answer comes from Chris G's code in the comments. I used the code with different sizes of documents and it works well. Thanks Chris G!

Posting the code here in case the link link in the comments breaks.

The solution uses DOMParser to parse the HTML content provided by the API call and scans it to find the content that should include the "Comment" button. Here are the relevant parts.

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"));
Avi
  • 267
  • 1
  • 3
  • 11