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');
},

因为即使反应没有引发错误，这也是添加/删除元素到光滑轮播的最简单方法。这是否可行取决于您计划渲染的元素数量以及高效的滑动旋转木马。

在ReactJs中更新组件更新的jQuery光滑轮播

1 个答案: