React 和 jQuery 光滑的旋转木马抛出错误

Question

受此启发 .

我将建议的解决方案应用于 Plunker。然后点了一个item，原来的bug又出现了

"Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid: .0.1.4"

我正在尝试这个，因为我有一个类似的项目，但有相同的错误消息。我需要在点击时调用一个函数。为了简单起见，这里我只是 console.log 一个字符串。第一次点击时 console.log 没有被调用，但是 "Two valid but unequal..." 错误被抛出。只有第二次点击才能正常执行。

我认为这一切都回到了问题：如何协调 React 与 jQuery 插件，该插件创建 DOM 节点的副本，而不像 Reat 期望的那样向它们添加键.

I tried also this carousel，同样的错误。

我对 Plunker 所做的更改：

添加的行

componentWillUpdate: function(){
    $(this.getDOMNode()).slick('unslick'); //remove the added dom elements
},
componentDidUpdate: function(){
    $(this.getDOMNode()).slick();
},
componentWillUnmount: function(){
    $(this.getDOMNode()).slick('unslick');
},

换行

<MoviePage data={mp} key={i}/>  // added "key"

var movies = this.props.data.map(function(m, i){
    return (
        <Movie data={m} key={i}/>

return <div className="movie col-xs-4" onClick={function() {console.log("Some action")}}>

Answer 1

复制内容的轮播不应与 React 一起使用，因为它需要唯一键。这就是我的结论。

所以我自己的答案是，我只是简单地使用了纯粹的 bootstrap 轮播，并在一张幻灯片中组织了 5 张图片。在代码示例中，"image" 只是一个数字，而我正在测试此解决方案。

render: function() {
  var thumbs = [
    this.getRange(0, 4), // [0,1,2,3,4]
    this.getRange(5, 9),
    this.getRange(10, 12)
  ];

  return (
    <div className="carousel slide product-carousel" data-ride="carousel" data-type="multi" data-interval="0" id="productCarousel" data-wrap="false">
      <div className="carousel-inner">
        {thumbs.map(this.eachCarouselItem)}
      </div>
      <a className="left carousel-control" href="#productCarousel" data-slide="prev">P</a>
      <a className="right carousel-control" href="#productCarousel" data-slide="next">N</a>
    </div>
  )
},
eachCarouselItem: function(item, j) {
  return <div className={"item" + (j ? "" : " active")} key={j}>
    {item.map(this.eachCarouselImg)}
  </div>
},
eachCarouselImg: function(image, i) {
  return <div key={i}>
      <div className="img-responsive" onMouseOver={function (ev) {console.log("I am happy")}}>
        {image}
      </div>
  </div>
},

React 和 jQuery 光滑的旋转木马抛出错误

React and jQuery slick carousel throws error

jquery

carousel

reactjs

slick.js