javascript - 在 ReactJs 中更新组件更新时更新 jQuery slick carousel

Question

我刚开始使用 ReactJs，我可以说它真的很棒。但是我遇到了一个问题，我似乎无法弄清楚如何解决这个问题。

我正在尝试实现一个自动搜索过滤组件，该组件根据名称过滤项目。在这里，我以电影和电影片名为例。搜索有效，但是当我尝试向组合中添加一些 jQuery 时，我在尝试过滤搜索结果时遇到了这个错误:

不变违规:ReactMount:两个有效但不相等的节点具有相同的 data-reactid

那些data-reactid相同的节点就是jQuery插件创建的节点，即Slick轮播。

这里你可以自己试试:

Plunker

只要您对 script.jsx 的第 45 行 发表评论，您就会看到我的搜索功能正在运行。

问题是，jQuery 插件加载到 componentDidMount 中，如 React docs 中所建议的那样，但是当 DOM 发生变化时，一切都变得一团糟，因为该函数只被调用一次。我需要在数据更新时重新加载 jQuery 插件，但我无法确定确切的时间、地点和方式。

我尝试使用 componentDidUpdate 代替，但它没有按预期工作。它也不会在页面加载时被调用。

非常感谢!

Answer 1

最简单的解决方案可能是这样做:

componentDidMount: function(){
  $(this.getDOMNode()).slick();
},
componentWillUpdate: function(){
  $(this.getDOMNode()).slick('unslick'); //remove the added dom elements
},
componentDidUpdate: function(){
  $(this.getDOMNode()).slick();
},
componentWillUnmount: function(){
  $(this.getDOMNode()).slick('unslick');
},

因为即使 React 没有抛出错误，这也是将元素添加/删除到 slick carousel 的最简单方法。这有多可行将取决于您计划渲染多少元素以及 slick carousel 的性能如何。