反应，使用引用scrollIntoView（）在componentDidUpdate（）上不起作用

Question

我在我的应用程序中使用Redux，在一个组件中，当商店发生变化时，我想滚动到一个特定的div标签。我让Redux部分工作，因此它触发componentDidUpdate（）html" target="_blank">方法（我已经路由到此component视图）。据我所知，问题在于方法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并尝试了人们在这里建议的不同方法：如何滚动div使其在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

我还在react中挣扎着滚动到列表的底部，这是对redux存储中的更改的响应，我偶然发现了这篇文章以及其他一些与滚动相关的stackoverflow文章。如果你也谈到这个问题，有几种方法可以解决这个问题。我的场景是，当列表呈现时，我需要一个“加载”微调器屏幕。以下是一些错误的方法：

1. 当load=true时，渲染微调器，否则渲染列表

{loading ? 
   <Spinner />
:
   <List />
}

如上所述，这不起作用，因为您可能希望滚动到列表底部的列表尚未呈现。

<div style={{display: loading ? 'block' : 'none'>
   <Spinner />
</div>
<div style={{display: loading ? 'none' : 'block'>
   <List />
</div>

这也不起作用，因为当您调用滚动时，要滚动到底部的列表实际上不太可能显示。

对于上述场景，更好的方法是使用一个加载，该加载充当组件的覆盖。这样，微调器和列表都会被渲染和显示，滚动就会发生，加载完成后，微调器可以被取消渲染或设置为不可见。

Answer 2

好的，已经有一段时间了，但是我在另一个项目中没有使用setTimeOut函数，所以我想回答这个问题。由于Redux通过props传递新的更新，我使用了componentwillreceiveprops（）方法，而不是componentdiddupdate（），这使您能够更好地控制更新的属性，并与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>
         )
      };
    }