尽管DOM已修改，但仍强制重新渲染React组件

Question

In addition of React, I am using an external library called Prism.js to do syntax highlighting. I've a React component that generates some example code. First render is fine. The component renders with its initial props, then I call Prism.highlightElement(); in componentDidUpdate() that does the syntax highlighting fine as well. However, we've inputs in the React parent component that changes the content of the code needed to be generated. When changes are made, the generated highlighted code stay the same. Other parts of the child component that are not been syntax highlighted thought Prism.js do update fine. So, it seems to be an issue with React not re-rendering modified DOM.

Here is a simplified version of the child component:

class CodeExample extends React.Component {

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(newProps) {
    this.forceUpdate();
    if(document.getElementById('integrationExample')) {
      Prism.highlightElement(document.getElementById('integrationExample'));
    }
  }

  componentDidUpdate() {
    if(document.getElementById('integrationExample')) {
      Prism.highlightElement(document.getElementById('integrationExample'));
    }
  }


  render() {
    return (
      <div>
        <pre>
          <code className="language-bash" id="integrationExample">$ curl {this.props.resultsUrl}
          </code>
        </pre>
      </div>
    )
  }

}

I've tried to move to state from props, componentWillReceiveProps() , componentDidUpdate() , this.forceUpdate(); without success. The highlighted code stays as if the props didn't change. Removing Prism.js fixed the issue, and the component updates fine.

Any ideas to force the code sample to re-render while keeping Prism.js?

Answer 1

Haven't tried this out, but I would try this with componentDidMount and componentDidUpdate , and see how it goes using a ref instead of document.getElementById .

class CodeExample extends React.Component {
  highlight(){
    Prism.highlightElement(this.el);
  }
  componentDidMount(){
    this.highlight();
  }
  componentDidUpdate(){
    this.highlight();
  }
  render() {
    return (
      <div>
        <pre>
          <code className="language-bash" ref={el => this.el = el}>$ curl {this.props.resultsUrl}
          </code>
        </pre>
      </div>
    )
  }
}