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 が変更されてフリック要素になることです。コンポーネントを再レンダリングすると、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>
    );
  }