Javascript 由于插件进行dom突变而导致的未捕获不变冲突

我在使用名为的javascript插件时遇到了一个问题，它支持触摸友好的幻灯片图像

我这样初始化它：

import Flickity from 'flickity';

---

这一切都很好，但问题是它在我的渲染中所针对的div被变异为flickity元素。当我重新渲染组件时，这有时会导致

未捕获不变冲突

错误，因此我想问是否有解决方案来克服这一问题

---

这就是我渲染相关组件的方式

  render() {
    return (
        <div ref="carousel" className="carousel">
          { this.props.src.map((image, index, array) => {
            if(image.link != null) {
              return (
                <div key={index} className="card" style={ {backgroundImage: `url(${image.link})`} }>
                  <img
                    src={image.link} />
                </div>
              );
            }
          }) }
        </div>
    );
  }

render（）{
返回(
{this.props.src.map（（图像、索引、数组）=>{
如果（image.link！=null）{
返回(
);
}
}) }
);
}

可以通过添加以下内容来解决我的问题：

  componentWillUpdate() {
    this.flkty.destroy()
  }

  componentDidUpdate() {
    this.flkty = new Flickity(this.refs.carousel, {
      cellAlign: 'left',
    })
  }

  componentWillUpdate() {
    this.flkty.destroy()
  }

  componentDidUpdate() {
    this.flkty = new Flickity(this.refs.carousel, {
      cellAlign: 'left',
    })
  }