javascript - 由于插件完成的 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 被突变为 flickity 元素。当我重新渲染组件时，这有时会导致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',
    })
  }