iDangero.us Swiper & React - 处理动态数据
iDangero.us Swiper & React - dealing with dynamic data
我有一个关于使用 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 文件,我在其中准备了一个 'dynamic content',我只是创建了一个数组,其中填充了一些图像。
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/
有人知道我遗漏了什么和做错了什么吗?我将非常感谢你的帮助。非常感谢!
拉德克
是因为你在"componentDidMount"
的生命周期中使用this.setState来填充你的数组movies
当外层componentDidMount被调用时,内层componentDidMount已经被调用,此时你的Swiper没有找到任何图片,因此它无法为每张图片计算出正确的宽度。
在componentWillMount中初始化你的图片数据。
componentWillMount() {
this.setState({
movies: [your pictures],
});
},
然后Swiper会知道盒子里有多少张图片,然后给每个人计算一个宽度
我有一个关于使用 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 文件,我在其中准备了一个 'dynamic content',我只是创建了一个数组,其中填充了一些图像。
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/
有人知道我遗漏了什么和做错了什么吗?我将非常感谢你的帮助。非常感谢!
拉德克
是因为你在"componentDidMount"
当外层componentDidMount被调用时,内层componentDidMount已经被调用,此时你的Swiper没有找到任何图片,因此它无法为每张图片计算出正确的宽度。
在componentWillMount中初始化你的图片数据。
componentWillMount() {
this.setState({
movies: [your pictures],
});
},
然后Swiper会知道盒子里有多少张图片,然后给每个人计算一个宽度