ReactJS 如何实现事件触发的同页区块滚动及现有方案是否最优

你当前用ref绑定DOM节点、调用scrollIntoView的滚动实现没有原理性问题，不存在通用意义上的“绝对最优解”，完全可以根据项目的实际场景判断要不要调整：

现有方案的适用场景 #

如果是小型单页应用，ContactData组件只会在Checkout页面内使用，没有跨场景复用需求，这套方案已经完全够用：

• 用React官方提供的createRef获取DOM节点，是框架允许的标准DOM操作方式
• 在componentDidMount生命周期触发滚动，刚好匹配组件渲染到页面后的时机
• 配置smooth行为参数实现的平滑滚动，和浏览器原生交互体验一致

完全没必要为了追求所谓的“最佳实践”强行上复杂方案，反而徒增维护成本。

可优化的常见调整方向 #

如果后续有扩展性或者体验升级的需求，可以按需调整：

• 降低逻辑耦合
  现在把“组件挂载就自动滚动”的逻辑写在ContactData组件内部，相当于给组件绑定了固定副作用。如果后续需要把ContactData复用到其他不需要自动滚动的页面，就得加一堆状态判断来控制滚动逻辑的开关，改起来很麻烦。
  可以把滚动的控制权上移到父级Checkout组件：由父组件持有对应区块的ref，在点击CONTINUE按钮、切换渲染ContactData的状态后，等新组件挂载完成再触发滚动，让ContactData只负责自身内容渲染，完全不需要感知滚动行为，后续复用会灵活很多。
• 规避滚动位置错位的坑
  你代码里提到loading状态下会先渲染Spinner，等异步接口返回后再加载完整表单内容，这种场景有个很容易踩的问题：组件刚挂载时，页面高度只有Spinner那么高，这时候触发滚动到区块顶部，等后续表单内容加载完把页面撑高，原本的滚动位置就会偏移，看起来就像没滚到位一样。
  遇到这类场景，要么把滚动触发的时机延后到内部异步内容完全加载、DOM高度稳定后再执行，要么给区块容器设置固定的最小高度，避免高度抖动导致的滚动偏差。
• 更轻量的无ref实现
  如果不需要自定义复杂的滚动参数，只需要让页面平滑滚动到指定区块，完全可以省掉手动写ref和滚动方法的逻辑：给ContactData的外层容器加个唯一的id属性，配合CSS全局设置的scroll-behavior: smooth，只需要在触发时把页面hash值改成对应id，就能实现和scrollIntoView完全一致的效果，代码量更少。

内容的提问来源于stack exchange，提问作者Ryuk-hash