Question

除了React之外，我还使用一个名为Prism.js的外部库来进行语法高亮显示。我有一个生成一些示例代码的React组件。首先渲染很好。该组件使用其初始道具呈现，然后我在Prism.highlightElement();中调用componentDidUpdate()，其语法突出显示也很好。但是，我们在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>
    )
  }
}

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

1 个答案: