Javascript 重置组件重新渲染时的滚动位置
Javascript 重置组件重新渲染时的滚动位置,javascript,reactjs,Javascript,Reactjs,看看这支笔：
为了方便起见，我还在这里粘贴代码。打开上面的画笔后，您将看到一个滑块被渲染。向右滚动滑块，然后单击更改幻灯片按钮，您将看到滑块以不同的数字重新渲染，但滑块的滚动位置不会重置。为什么滚动位置没有复位？谢谢
函数滑块({
元素内容
}) {
报税表（<
div className='slider element'>{
元素内容
}
)
}
类滑块扩展了React.Component{
render（）{
报税表（<
div className='slider'>{
this.prop
看看这支笔：
为了方便起见，我还在这里粘贴代码。打开上面的画笔后，您将看到一个滑块被渲染。向右滚动滑块，然后单击更改幻灯片
按钮，您将看到滑块以不同的数字重新渲染，但滑块的滚动位置不会重置。为什么滚动位置没有复位？谢谢
函数滑块({
元素内容
}) {
报税表（<
div className='slider element'>{
元素内容
}
)
}
类滑块扩展了React.Component{
render（）{
报税表（<
div className='slider'>{
this.props.sliderContentArray.map（elementContent=>
)} <
/div>
)
}
}
类SliderContainer扩展React.Component{
构造函数（）{
超级（）
this.slidersContent=[
[1, 2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15, 16]
]
此.state={
currentSliderIndex:0
}
}
开关滑块（）{
this.setState（（prevState）=>{
如果（prevState.currentSliderIndex==0）{
返回{
当前幻灯片索引：1
}
}否则{
返回{
currentSliderIndex:0
}
}
})
}
render（）{
报税表（<
div>
<
滑块内容阵列={
this.sliderContent[this.state.currentSliderIndex]
}
/> <
按钮类名称='滑块开关按钮'
onClick={
this.switchSlider.bind（this）
} >
换幻灯片<
/按钮><
/div>
)
}
}
ReactDOM.render（<
SliderContainer/>，
document.getElementById（'root'））
);
滑块{
显示器：flex；
溢出：滚动；
}
.滑块元件{
弹性收缩：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：20%；
高度：100px；
背景：黄色；
}
.滑块元素+.滑块元素{
左边距：10px；
}
.滑块开关按钮{
边缘顶部：10px；
}
每次更新组件时，需要使用属性手动更新滚动位置。您可以在
滑块的组件diddupdate
中执行此操作：
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollLeft = 0;
}
在此处找到工作笔：滑块内容重新渲染器，但滚动条不知道它。您需要手动将div
的scroll left
位置更改为0
，该属性具有溢出：scroll
属性，在您的情况下，该属性是带滑块类名的div
您可以将一个ref附加到它并设置scrollLeft=0
like
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>
)
}
}
类滑块扩展React.Component{
渲染（）{
返回(
{this.props.sliderContentArray.map（elementContent=>）}
)
}
}
类SliderContainer扩展React.Component{
构造函数（）{
超级（）
this.slidersContent=[
[1, 2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15, 16]
]
此.state={
currentSliderIndex:0
}
}
开关滑块（）{
this.setState（（prevState）=>{
如果（prevState.currentSliderIndex==0）{
返回{currentSliderIndex:1}
}否则{
返回{currentSliderIndex:0}
}
}，（）=>{this.slider.scrollLeft=0}）
}
渲染（）{
返回(
this.slider=ref}sliderContentArray={this.sliderContent[this.state.currentSliderIndex]}/>
换幻灯片
)
}
}
您可以针对该问题使用通用解决方案
export const history = createHistory()
history.listen((location, action) => {
window.scrollTo(0, 0)
})
使用此侦听器，您可以“观察”路由中的每个更改
来源：可能存在的副本