由于插件导致的dom变异导致的未捕获的不变违规

Question

我遇到了一个使用名为flickity的JavaScript插件的问题，它可以实现触控友好的幻灯片图像。

我初始化这样的：

import Flickity from 'flickity'; 

---

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

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

这一切工作正常，但问题是，DIV，它的目标是<div ref="carousel"></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', 
    }) 
    }