iDangero.us Swiper & React — работа с динамическими данными

У меня вопрос, связанный с реализацией iDangero.us Swiper с React. Я играл с ним какое-то время, и моя проблема в том, что фактическое скольжение не работает в ситуации, когда я работаю с динамическими данными. Позвольте мне проиллюстрировать это на примере.

Мой код составлен следующим образом:

1) У меня есть компонент под названием SwiperComponent. Есть две части: метод componentDidMount(), в котором я помещаю инициализацию компонента Swiper, и метод render(), в котором я генерирую структуру, определенную iDangero.us Swiper.

var SwiperComponent = React.createClass({
  componentDidMount() {
    this.swipe = new Swiper(React.findDOMNode(this), {
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 10
    });
  },

  render() {
    return React.createElement('div', React.__spread({}, this.props, {className: 'swiper-container'}),
      React.createElement('div', {className: 'swiper-wrapper'},
        React.Children.map(this.props.children, function (child, index) {
          return React.createElement('div', {className: 'swiper-slide'}, React.cloneElement(child));
       })
      )
    );
  }
});

2) У меня есть простой файл Index.jsx, в котором я подготавливаю «динамический контент» таким образом, что я просто создаю массив, который я заполняю некоторыми изображениями.

var Index = React.createClass({

  getInitialState: function() {
    return {
      movies: []
    };
  },

  componentDidMount() {
    this.setState({
      movies: ["http://www.themusehotel.com/design/images/930-481/nyc-skyline.jpg", "https://ephemeralnewyork.files.wordpress.com/2010/08/broadway47thstreet2010.jpg", "http://41.media.tumblr.com/27d14da3be1e02eb7b6ead5bda0ac1b2/tumblr_n5dqi4XDz61qdeuyro1_1280.jpg", "http://photos.cntraveler.com/2014/09/29/5429c32b425f183f61bf7316_new-york-city-skyline.jpg"],
    });
  },


  render: function() {
    var items = this.state.movies;

    return (
      <SwiperComponent>
      {
        items.map((item) => {
          return (
           <img src={item} width="100%" height="200"/>
          )
        })
      }
      </SwiperComponent>
    )
  }
});

Как я уже говорил, проблема в том, что выдвижная часть не работает. Довольно интересно то, что он начинает работать, как только я открываю консоль разработчика в Chrome или смахиваю массив и помещаю вместо него какие-то статические теги.

Я готовлю JSfiddle, где вы можете увидеть эту проблему в действии - https://jsfiddle.net/4z3zyk07/4/< /а>

Кто-нибудь знает, что я пропустил и сделал неправильно? Я буду очень признателен за вашу помощь. Большое спасибо!

Радек


reactjs slider jquery swiper
person Radek Tomasek    schedule 01.10.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Это потому, что вы используете this.setState для заполнения вашего массива фильмов в жизненном цикле "componentDidMount"

когда вызывается внешний компонентDidMount, внутренний компонентDidMount уже вызывается, и в это время ваш Swiper не находит ни одного изображения, поэтому он не может рассчитать правильную ширину для каждого изображения.

Инициализируйте данные изображения в componentWillMount.

  componentWillMount() {
    this.setState({
      movies: [your pictures],
    });
  },

затем Swiper узнает, сколько изображений в коробке, и рассчитает ширину для каждого.

person user5474476    schedule 26.09.2016