看看这支笔:https://codepen.io/segmentationfaulter/pen/XzgJyV
为方便起见,我也在这里粘贴代码。打开上面的笔后,您将看到呈现滑块。向右滚动滑块,单击change slides
按钮,您将看到使用不同的数字重新渲染滑块,但滑块的滚动位置未重置。为什么滚动位置没有重置?感谢
function SliderElement({
elementContent
}) {
return ( <
div className = 'slider-element' > {
elementContent
} < /div>
)
}
class Slider extends React.Component {
render() {
return ( <
div className = 'slider' > {
this.props.sliderContentArray.map(elementContent => < SliderElement elementContent = {
elementContent
}
/>)} <
/div>
)
}
}
class SliderContainer extends React.Component {
constructor() {
super()
this.slidersContent = [
[1, 2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15, 16]
]
this.state = {
currentSliderIndex: 0
}
}
switchSlider() {
this.setState((prevState) => {
if (prevState.currentSliderIndex === 0) {
return {
currentSliderIndex: 1
}
} else {
return {
currentSliderIndex: 0
}
}
})
}
render() {
return ( <
div >
<
Slider sliderContentArray = {
this.slidersContent[this.state.currentSliderIndex]
}
/> <
button className = 'slider-switch-button'
onClick = {
this.switchSlider.bind(this)
} >
change slides <
/button> <
/div>
)
}
}
ReactDOM.render( <
SliderContainer / > ,
document.getElementById('root')
);
.slider {
display: flex;
overflow: scroll;
}
.slider-element {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 20%;
height: 100px;
background: yellow;
}
.slider-element+.slider-element {
margin-left: 10px;
}
.slider-switch-button {
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
答案 0 :(得分:2)
您的滑块内容会重新呈现但滚动条却不知道它。您需要手动将scrollLeft
位置更改为0
,其中div
具有overflow: scroll
属性,在您的情况下为div with slider className
。
您可以附加引用并设置scrollLeft = 0
class Slider extends React.Component {
render () {
return (
<div ref={this.props.innerRef} className='slider'>
{this.props.sliderContentArray.map(elementContent => <SliderElement elementContent={elementContent} />)}
</div>
)
}
}
class SliderContainer extends React.Component {
constructor () {
super()
this.slidersContent = [
[1, 2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15, 16]
]
this.state = {
currentSliderIndex: 0
}
}
switchSlider () {
this.setState((prevState) => {
if (prevState.currentSliderIndex === 0) {
return { currentSliderIndex: 1 }
} else {
return { currentSliderIndex: 0 }
}
}, () => {this.slider.scrollLeft = 0})
}
render () {
return (
<div>
<Slider innerRef={(ref) => this.slider = ref} sliderContentArray={this.slidersContent[this.state.currentSliderIndex]} />
<button
className='slider-switch-button'
onClick={this.switchSlider.bind(this)}
>
change slides
</button>
</div>
)
}
}
答案 1 :(得分:0)
每次更新组件时,您都需要使用scrollLeft属性手动更新滚动位置。您可以在componentDidUpdate
组件的Slider
内执行此操作:
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollLeft = 0;
}
答案 2 :(得分:0)
您可以针对该问题使用通用解决方案
export const history = createHistory()
history.listen((location, action) => {
window.scrollTo(0, 0)
})
有了这个监听器,你可以“观察”路由中的每一个变化
来源:https://medium.com/@nasir/reset-scroll-position-on-change-of-routes-react-a0bd23093dfe#