【问题标题】：ReactJS: How to handle scroll to a section on the same page?ReactJS：如何处理滚动到同一页面上的某个部分？
【发布时间】：2021-02-08 03:51:30
【问题描述】：

问题：

在发生某些事件时处理页面上特定部分的滚动行为的最佳方法是什么？

代码：

class ContactData extends Component {

  state = {form related state}
 
  myRef = React.createRef();
 
  executeScroll = () => this.myRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
 
  componentDidMount() {
    this.executeScroll();
  }
  render() {
  
    if (this.state.loading) {
      form = <Spinner />;
    }
    return (
      <div ref={this.myRef} className={classes.ContactData}>
        <h4>Contact Information</h4>
        {form}
      </div>
    );
  }
}
 
export default ContactData;

示例：

在下面的 GIF 中，您可以看到当我单击 CONTINUE 按钮时，另一个组件 (ContactData) 被渲染，并且在参考 (refs) 的帮助下 - 我可以触发此行为。

组件树：

Checkout (Container): 渲染子组件的主页面

ContactData（结帐的子组件）

我的这个实现工作得很好。现在，我想知道：

有没有更好的方法来做到这一点，或者就是这样？

【问题讨论】：

我自己更喜欢你的方法，但是当项目扩展并且你在另一个文件或组件中操作滚动事件时它会变得混乱。除非您将 ref 保存在 redux 中的某个地方或通过 forwardRef 传递它。
@ZahraShahrouzi 有道理。谢谢。

标签： javascript html reactjs dom dom-events

【解决方案1】：

您可以使用react-scroll 包。您只需为目标部分设置 id 并使用以下代码：

var Scroll   = require('react-scroll');
var scroller = Scroll.scroller;

scroller.scrollTo('myScrollToElement', {
    smooth: true,
})

文档中还解释了其他方法。

【讨论】：