重置组件重新渲染时的滚动位置

Question

看看这支笔：https://codepen.io/segmentationfaulter/pen/XzgJyV

为了方便起见，我还在这里粘贴代码。打开上面的画笔后，您将看到一个滑块被渲染。向右滚动滑块，然后单击更改幻灯片按钮，您将看到滑块以不同的数字重新渲染，但滑块的滚动位置不会重置。为什么滚动位置没有复位？谢谢

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>

Answer 1

您可以使用通用解决方案解决该问题

export const history = createHistory()

history.listen((location, action) => {
    window.scrollTo(0, 0)
})

使用此侦听器，您可以“观察”路由中的每个更改

来源：https://medium.com/@nasir/rest-scroll-loction-on-tion-of-路由-反应-a0bd23093dfe#

Answer 2

您的滑块内容重新呈现，但滚动条不知道它。您需要手动更改scroll左边位置为0，用于具有overflow： scroll属性的div，在您的情况下，该属性是带有滑块类名称的div。

您可以将一个ref附加到它并设置scrollLeft=0like

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>
    )
  }
}

代码笔

Answer 3

每次更新组件时，您都需要使用scrollLe属性手动更新滚动位置。您可以在Slider组件的组件中执行此操作：

  componentDidUpdate() {
    ReactDOM.findDOMNode(this).scrollLeft = 0;
  }

在此处找到工作笔：https://codepen.io/danegit/pen/xPrayY?editors=0010