[英]React Swiper with Dynamic Content
我正在使用 react-id-swiper 制作帶有 Instagram 圖像的輪播。 Swiper 組件在響應后似乎沒有更新。 我認為將我的 setState 放在 componentWillMount 中會起作用,但顯然不會。 當我在 Chrome 中打開檢查器時它開始工作了嗎?
import React, { Component } from 'react'
import Swiper from 'react-id-swiper'
import request from 'superagent'
import './index.css'
const swiperParams = {
slidesPerView: 5,
spaceBetween: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
}
class Carousel extends Component {
constructor(props) {
super(props)
this.state = {
photos: []
}
}
componentWillMount() {
this.fetchPhotos();
}
fetchPhotos() {
request
.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=' + process.env.INSTAGRAM_ACCESS_TOKEN)
.then((res) => {
this.setState({
photos: res.body.data
})
})
}
render() {
return (
<Swiper {...swiperParams}>
{this.state.photos.map((photo, key) => {
return (
<div key={photo.id}>
<img src={photo.images.standard_resolution.url} alt={photo.caption} />
</div>
)
})}
</Swiper>
)
}
}
export default Carousel
在您的對象swiperParamas
包含以下屬性
rebuildOnUpdate: true
我在 react-id-swiper github 上發現了這個問題,解決了我的問題。
我只需要將 shouldSwiperUpdate 屬性添加到我的 Swiper 組件中。 該組件現在看起來像這樣:
<Swiper {...swiperParams} shouldSwiperUpdate>
...
</Swiper>
每次重新渲染組件時,這都會更新 Swiper。
嘗試添加observer: true,
到參數
您需要在渲染之外的數組中映射:
const swiperItems = this.state.photos.map((photo, key) => {
return (
<div key={photo.id}>
<img src={photo.images.standard_resolution.url} alt={photo.caption} />
</div>
)
})
return (
<Swiper {...swiperParams}>
{swiperItems}
</Swiper>
)
這對我有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.