0
我試圖設置它,以便在從一個數組映射的映像滾動時,狀態會更新爲該映像的座標,從而更新Google Map。React映射數組中的OnScroll事件偵聽器
<CloudinaryContext cloudName="hcjmhcjf" fetchFormat="auto">
<div className="image-holder">
{displayImages.map((displayImage, i) => {
return (
<div
className="responsive"
key={i}
ref="img"
onScroll={this.handleScroll(this.state.images[i].location)}>
<div className="img">
<a
target="_blank"
href={`http://res.cloudinary.com/gdbdtb/image/upload/${displayImage}.jpg`}>
<Image publicId={displayImage} responsive style={{width: '100%'}}>
<Transformation crop="scale" width="auto" responsive_placeholder="blank" />
</Image>
</a>
</div>
</div>
);
})}
</div>
</CloudinaryContext>
從通過一些其他的問題,閱讀我設置以下生命週期方法了:
componentDidMount() {
const imgDiv = ReactDOM.findDOMNode(this.refs.img)
imgDiv.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
const imgDiv = ReactDOM.findDOMNode(this.refs.img)
imgDiv.removeEventListener('scroll', this.handleScroll);
}
然而,ReactDOM.findDOMNode(this.refs.img)
總是返回undefined
會是怎樣一種方式,我可以打電話給
handleScroll(location) {
this.setState({
center: location
})
}
並且在規範中有地圖更新圖像是否滾動?
你能澄清你的要求嗎?我不明白以下內容:「當從一個數組映射的圖像滾動時,狀態會更新爲該圖像的座標」 –
@MatthewBarbara,所以我有一個圖像陣列毗鄰谷歌地圖。在第一次渲染時,谷歌地圖以第一張圖片的座標爲中心。我想要的是當圖像滾動時,谷歌地圖將重新居中滾動的圖像 –
你可以把你的問題放在codepen或jsfiddle上嗎?這將更容易理解這個問題 –