javascript - react ，使用 Refs 到 scrollIntoView() 在 componentDidUpdate() 中不起作用

Question

我在我的应用程序中使用 Redux，在一个组件内 我想在商店发生变化时滚动到特定的 div 标签。我有 Redux 部分工作，所以它触发了 componentDidUpdate() 方法(我已经路由到这个组件 View )。据我所知，问题是 scrollIntoView() 方法无法正常工作，因为 componentDidUpdate() 具有滚动到顶部覆盖 scrollIntoView() 的默认行为。为了解决这个问题，我将调用 scrollIntoView() 的函数包装在一个 setTimeout 中，以确保稍后发生。我想做的是调用 preventDefault() 或任何其他更优雅的解决方案，但我找不到从哪里获取触发“scrollTop”的事件我在这里查看了文档:https://facebook.github.io/react/docs/react-component.html#componentdidupdate并且在此函数中传递的参数是 componentDidUpdate(prevProps, prevState) ，因为没有事件我不知道如何调用 preventDefault()

我已关注此文档:https://facebook.github.io/react/docs/refs-and-the-dom.html并尝试了人们在这里建议的不同方法:How can I scroll a div to be visible in ReactJS?

虽然没有任何效果如果有人对我有任何提示，这是我的代码，谢谢

class PhotoContainer extends React.Component {

  componentDidUpdate(){
    setTimeout(() => {
     this.focusDiv();
    }, 500);

  }
  focusDiv(){
    var scrolling = this.theDiv;
    scrolling.scrollIntoView();

  }

  render() {
    const totalList = [];
    for(let i = 0; i < 300; i += 1) {
        totalList.push(
            <div key={i}>{`hello ${i}`}</div>
        );
    }

  return (
      <div >
          {totalList}
          <div ref={(el) => this.theDiv = el}>this is the div I'm trying to scroll to</div>
      </div>
  )

};

Answer 1

好吧，已经有一段时间了，但我在另一个没有 setTimeOut 函数的项目中工作，所以我想回答这个问题。由于 Redux 通过 props 传递新的更新，我使用了 componentWillRecieveProps() 方法而不是 componentDidUpdate() ，这使您可以更好地控制更新的属性并按预期工作使用 scrollIntoView() 函数。

class PhotoContainer extends React.Component {

  componentWillReceiveProps(newProps) {
    if (
      this.props.navigation.sectionSelected !==
        newProps.navigation.sectionSelected &&
      newProps.navigation.sectionSelected !== ""
    ) {
      this.focusDiv(newProps.navigation.sectionSelected);
    }
  }

  focusDiv(section){
    var scrolling = this[section]; //section would be 'theDiv' in this example
    scrolling.scrollIntoView({ block: "start", behavior: "smooth" });//corrected typo
  }

  render() {
    const totalList = [];
    for(let i = 0; i < 300; i += 1) {
        totalList.push(
            <div key={i}>{`hello ${i}`}</div>
        );
    }

    return (
      <div >
          {totalList}
          <div ref={(el) => this.theDiv = el}>
            this is the div I am trying to scroll to
          </div>
       </div>
         )
      };
    }