4

I want to use Owl Carousel with React, and I am new to React.

Please see this jsfiddle, I spent much time to do it.

The JSX code 

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')
  );
});

I included Jquery, Reactjs, Owl Carousel, too.

The problem is that when I tap button "Images List 1" to change the source array of Owl Carousel, the item count of carousel should become 1. However, it is still 3, and it only change first item. I think React only replace first item and ignore whole div, but I don't know how to fix it. Please give me some hints.

Howard
  • 601
  • 1
  • 11
  • 15
  • You shouldn't use the `index` as a `key` for a list. React cannot detect a change of the item (as the `key` won't have changed -- `index` at position `1` still is a `1`). If there aren't duplicates, you might be able to use the `image` value. – WiredPrairie Apr 14 '15 at 12:02
  • Thanks. I understand, but I try to modify it to `
    `, it seems not work.     – Howard Apr 14 '15 at 12:11
  • Also -- if you open the JavaScript console, you can see that there's an error caused by the OwlCarousel manipulating the DOM, which doesn't work well with React (and in fact, causes issues as you see). Consider an option like: http://stackoverflow.com/a/25514772/95190. – WiredPrairie Apr 14 '15 at 12:33

2 Answers2

1

You have two options here:

  1. You should deinitialize (destroy) OwnCarousel on componentWillUpdate and init it againt on componentDidUpdate after React rerendered the component with new images

  2. You should return false in shouldComponentUpdate and manually update DOM in componentWillReceiveProps using nextProps.images value and jQuery

Olim Saidov
  • 2,796
  • 1
  • 25
  • 32
0

sorry my bad english!

You should verify length of element the carousel will use.

Example: in this case, my element is .banner-img - refer elements of <img />

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