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

Updating jQuery slick carousel on component update in ReactJs

本文关键字：更新 jQuery slick carousel 组件 ReactJs      更新时间：2023-12-22

我刚开始使用ReactJs，我可以看出它真的很棒。但我遇到了一个问题，我似乎不知道如何解决这个问题。

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

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

具有相同data-reactid的节点是由jQuery插件创建的节点，即Slick carousel。

在这里你可以自己试试：

Plunker

只要您对script.jsx的第45行发表评论，您就可以看到我的搜索功能正在发挥作用。

问题是，正如React文档中所建议的那样，jQuery插件加载在componentDidMount中，但当DOM发生更改时，一切都会变得一团糟，因为函数只调用一次。当数据更新时，我需要重新加载jQuery插件，但我不知道确切的时间、地点和方式。

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

非常感谢！

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

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没有抛出错误，这也是向光滑的旋转木马添加/删除元素的最简单方法。这有多可行取决于你计划渲染多少元素，以及光滑旋转木马的性能。

相关文章：