如何在React中处理第三方dom操纵？

Question

I am new to React and not sure what is the proper way of dealing with the following situation:

I made a component that renders code and uses Highlight.js to highlight the syntax.
It worked, but broke when the content updated.

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        hljs.highlightBlock(this.elem);
    }
    render() {
        return (
            <pre><code ref={(elem) => { this.elem = elem }}>{this.props.code}</code></pre>
        );
    }
}

My understanding is that React handles the code node, and doesn't like when Highlight.js tampers with it... so i resorted to this:

class CodeBox extends React.Component {
    componentDidMount() {
        this.highlight();
    }
    componentDidUpdate() {
        this.highlight();
    }
    highlight() {
        this.elem.innerHTML = "";
        let c = document.createElement("code");
        c.innerHTML = this.props.code;
        this.elem.appendChild(c);
        hljs.highlightBlock(c);
    }
    render() {
        return (
            <pre ref={(elem) => { this.elem = elem }}></pre>
        );
    }
}

Which works, but now i feel like i'm using React wrong.
Is there a way to do this that doesn't involve directly manipulating the dom ?

Answer 1

You can use dangerouslySetInnerHTML to achieve the same result without using refs or altering the DOM after rendering, however because of how Highlight.js works, you still have to use a fake HTML element.

To do this, instead of using the componentDidUpdate and componentDidMount methods we can use the componentWillMount and componentWillReceiveProps methods like so:

componentWillMount() {
    this.highlight(this.props);
}
componentWillReceiveProps(newProps) {
    this.highlight(newProps);
}
highlight(props) {        
    parseElement.innerHTML = props.code;        
    hljs.highlightBlock(parseElement);
    this.setState({
        code: {__html: parseElement.innerHTML}
    });
}

and then we render out the new already formatted code in the render method:

return (
   <pre><code dangerouslySetInnerHTML={this.state.code} /></pre>
);

Here is a JS Fiddle

this is still not ideal, but it doesn't break React principles, while still using Highlight.js that relies on additional DOM manipulations.