iDangero.us Swiper & React - 处理动态数据答案

【问题标题】：iDangero.us Swiper & React - dealing with dynamic dataiDangero.us Swiper & React - 处理动态数据
【发布时间】：2015-10-01 16:16:43
【问题描述】：

我有一个关于使用 React 实施 iDangero.us Swiper 的问题。我已经玩了一段时间了，我的问题是当我使用动态数据时，实际的滑动不起作用。让我举例说明这一点。

我的代码由以下方式组成：

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/

有人知道我错过了什么和做错了吗？我将非常感谢您的帮助。非常感谢！

拉德克

【问题讨论】：

标签： jquery slider reactjs swiper

【解决方案1】：

这是因为你在"componentDidMount"的生命周期中使用了this.setState来填充你的数组电影

当调用外部componentDidMount时，内部componentDidMount已经被调用，此时你的Swiper没有找到任何图片，因此它无法为每张图片计算正确的宽度。

在componentWillMount中初始化你的图片数据。

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

然后Swiper会知道盒子里有多少张图片，并为每个人计算一个宽度。

【讨论】：