javascript - 在组件重新渲染时重置滚动位置

Question

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

为了方便起见，我也把代码贴在这里。打开上面的笔后，您会看到呈现了一个 slider 。向右滚动 slider ，然后单击 change slides 按钮，您将看到 slider 重新呈现为不同的数字，但 slider 的滚动位置没有重置。为什么不重置滚动位置？谢谢

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

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

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

在这里找到工作笔:https://codepen.io/danegit/pen/xPrayY?editors=0010