图像与ReactJs进行比较

Question

我正在尝试在React上附加第三方javascript程序包，例如https://image-compare-viewer.netlify.app

根据文档，我可以使用第二个参数

更新设置

const options = {
  showLabels: false,
  labelOptions: {
    before: 'Before',
    after: 'After',
    onHover: false
  },
  verticalMode: false,
}

// Add your options object as the second argument
const viewer = new ImageCompare(element, options).mount();

我已经通过 componentDidMount（）生命周期方法成功附加了该库。 但是我不确定如何更新附件包的选项。

....

constructor() {
    super(...arguments);

    this.imageViewer = createRef();
    this.imageContainerRef = null;

    this.state = {
        showLabels: false,
        verticalMode: false,
    }
}

componentDidMount() {
    let options = this.state;

    this.imageViewer = new ImageCompare( this.imageContainerRef, options ).mount();
}


....

render() {
    return(
        <div ref={ el => (this.imageContainerRef = el) }>
            <img src={ 'https://placehold.it/800x400' } alt="Before" />
            <img src={ 'https://placehold.it/800x400' } alt="After" />
        </div>
    )
}

更新后的状态不适用于componentDidMount，因为据我所知，componentDidMount仅触发一次。