ReactJS：如何处理滚动到同一页面上的某个部分？

Question

问题：

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

代码：

---

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（结帐的子组件）

---

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

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

Answer 1

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

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

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

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