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突变导致未捕获的不变违规

1 个答案: