由于 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',
    })
  }

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

Uncaught Invariant Violation due to dom mutations done by plugin

javascript

reactjs

flickity