Question

我想将Owl Carousel与React一起使用，我是React的新手。

请参阅此jsfiddle，我花了很多时间来做这件事。

JSX代码

var Carousel = React.createClass({
  componentDidMount: function(){
    $(React.findDOMNode(this)).owlCarousel({
      items: 4
    });
  },
  render: function(){
    return(
      <div id="inx-carousel-thumb" className="owl-carousel">
        {
          this.props.images.map(function(image, index){
            return (
              <div className="item" key={index}><img src={image} /></div>
            )
          }.bind(this))
        }
      </div>
    );
  }
});
var imagesList = [['http://www.myfacewhen.net/uploads/3908-troll-smile.jpg', 'http://www.captionite.com/templates/thumb-success.jpg', 'http://pauljadam.com/forma11y/img/rage-guy-teeth-smile.jpg'],['http://i2.kym-cdn.com/entries/icons/original/000/004/073/smile.png']];
var Container = React.createClass({
  getInitialState: function(){
    return {
      images: imagesList[0]
    };
  },
  changeImages: function(index) {
    this.setState({images: imagesList[index]});
  },
  render: function(){
    return(
      <div>
        <Carousel images={this.state.images} />
        <input type="button" onClick={this.changeImages.bind(this, 0)} value="Images List 0" />
        <input type="button" onClick={this.changeImages.bind(this, 1)} value="Images List 1" />
      </div>
    );
  }
});
$(document).ready(function(){
  React.render(
    <Container />,
    document.getElementById('container')
  );
});

我也包括Jquery，Reactjs，Owl Carousel。

问题在于，当我点击按钮＆＃34;图像列表1＆＃34;要更改Owl Carousel的源数组，旋转木马的项目数应该为1.但是，它仍然是3，它只会改变第一项。我认为React只替换第一项并忽略整个div，但我不知道如何解决它。请给我一些提示。

Answer 1

这里有两个选项：

您应该在componentWillUpdate上取消初始化（销毁）OwnCarousel并在React使用新图片重新呈现该组件后在componentDidUpdate上再次初始化
您应该在false中返回shouldComponentUpdate并使用componentWillReceiveProps值和jQuery

nextProps.images

Answer 2

抱歉，我的英语不好！

您应该验证轮播将使用的元素长度。

示例：在这种情况下，我的元素是.banner-img - 引用<img />的元素

componentDidUpdate: function () {
        if ($('.banner-img').length > 0) {
            $("#owl-home-slider").owlCarousel();
        }
}

猫头鹰旋转木马与反应

2 个答案: