ReactJs中组件更新的jQuery光滑旋转木马更新

Question

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

我正在尝试实现一个自动搜索过滤组件，它根据项目的名称进行筛选。这里，我以电影和电影标题为例。搜索是可行的，但是一旦我尝试在混合中添加一些jQuery，我就会在筛选搜索结果时得到这个bug：

不变冲突: ReactMount:两个具有相同的有效但不平等的节点

具有相同data-reactid的节点是由jQuery插件创建的节点，即浮油旋转木马。

在这里你可以自己试一试：

柱塞

一旦您评论第45行 of script.jsx，您就可以看到我的搜索功能正在工作。

问题是，jQuery插件是按照反应文档中的建议在componentDidMount中加载的，但是当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没有抛出错误，这也是添加/删除元素以修饰旋转木马的最简单方法。这是可行的，这将取决于你计划渲染多少元素，以及如何表现光滑旋转木马是。