由于插件完成的 dom 突变而导致的未捕获不变冲突

Question

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

我像这样初始化它：

import Flickity from 'flickity';

---

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

这一切都工作正常，但问题是它针对我的渲染中的<div ref="carousel"></div>的div 发生了变化，变成了轻弹元素。当我重新渲染组件时，这有时会导致Uncaught Invariant Violation错误，因此我想问是否有解决方案可以克服这个问题？

---

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

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

Answer 1

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

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