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

Question

除了 React，我还使用了一个名为 Prism.js 的外部库来进行语法高亮。我有一个生成一些示例代码的 React 组件。第一次渲染很好。该组件以其初始道具呈现，然后我在componentDidUpdate() 中调用Prism.highlightElement();，它也可以很好地突出显示语法。但是，我们在 React 父组件中输入了更改需要生成的代码内容的输入。进行更改时，生成的突出显示的代码保持不变。没有被语法高亮的子组件的其他部分认为 Prism.js 确实更新得很好。所以，React 没有重新渲染修改后的 DOM 似乎是个问题。

这是子组件的简化版本：

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

}

我试图从道具转移到状态，componentWillReceiveProps()，componentDidUpdate()，this.forceUpdate();，但没有成功。突出显示的代码保持不变，就好像道具没有改变一样。删除 Prism.js 解决了这个问题，并且组件更新正常。

有什么想法可以强制代码示例在保留 Prism.js 的同时重新渲染？

Answer 1

还没有尝试过，但我会尝试使用 componentDidMount 和 componentDidUpdate，然后看看使用 ref 而不是 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>
    )
  }
}