在 ReactJs 组件更新时更新 jQuery slick carousel

Question

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

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

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

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

这里你可以自己试试：

只要您对 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 没有抛出错误，这也是 add/remove 元素平滑轮播的最简单方法。这有多可行将取决于您计划渲染多少元素以及 slick carousel 的性能如何。

在 ReactJs 组件更新时更新 jQuery slick carousel

Updating jQuery slick carousel on component update in ReactJs

javascript

jquery

reactjs