javascript - 带有 React 的猫头鹰旋转木马

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。

问题是，当我点击“Images List 1”按钮更改 Owl Carousel 的源数组时，carousel 的项目数应该变为 1。但是，它仍然是 3，而且它只更改第一个项目。我认为 React 只替换第一项而忽略整个 div，但我不知道如何修复它。请给我一些提示。

Answer 1

这里有两个选择:

1. 您应该在 componentWillUpdate 上取消初始化(销毁)OwnCarousel，并在 React 使用新图像重新渲染组件后在 componentDidUpdate 上再次初始化它

2. 您应该在 shouldComponentUpdate 中返回 false 并使用 nextProps.images 在 componentWillReceiveProps 中手动更新 DOM值和 jQuery