Question

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

“未捕获错误：不变违规：ReactMount：两个有效，但是具有相同data-reactid的不等节点：.0.1.4“

My new plunker is here,我将附加到底部进行更改。

我正在尝试这个，因为我有一个类似的项目，同样的错误信息。我需要在点击时调用一个函数。为了简单起见，我在这里只是console.log一个字符串。首次单击时，不会调用console.log，但会引发“两个有效但不等于......”错误。只有第二次点击才能正确执行。

我认为这一切都回到了这个问题：如何协调React与创建DOM节点副本的jQuery插件，而不像Reat所期望的那样为他们添加密钥。

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

我对Plunker所做的更改：

ADDED LINES

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一起使用，因为它需要唯一的密钥。这是我的结论。

所以对自己的答案是，我只是使用了纯粹的自举旋转木马，并在一张幻灯片中组织了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光滑的轮播引发错误

1 个答案: