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

IT技术 javascript jquery reactjs
2021-05-06 06:42:44

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

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

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

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

在这里你可以自己尝试一下:

普朗克

只要你对此有何评论45行script.jsx,你可以看到我的搜索功能工作正常。

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

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

非常感谢!

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 没有抛出错误,这也是将元素添加/删除到光滑轮播的最简单方法。这有多可行取决于您计划渲染的元素数量以及光滑轮播的性能。