如何根据另一个州属性定义状态？

Question

我来自Ember世界，如果这个问题非常基本（我确定是这样的话），请道歉。我有一个组件，只要滚动窗口就会设置状态“scrollPosition”。我想定义一个新的状态属性“isScrolledToTop”，当“scrollPosition”为0时，它等于true。

在Ember中，我会简单地定义一个新属性，并在scrollPosition更改时检查条件。不太确定如何在React中执行此操作。我在考虑使用“componentDidUpdate”，但很确定这不是正确的方法。感谢您的帮助！

Answer 1

如果您在询问“如果用户滚动到页面顶部后如何触发某些事件”，则答案是在onscroll事件回调中执行此操作。

如果你想在滚动位置位于页面顶部时以不同方式呈现某些东西（例如全尺寸标题），那么逻辑将进入render()方法你的组件。类似的东西：

render() {
  if (this.state.scrollPosition === 0) {
    // do something specific to this scenario
  }
  return ...
}

This part文档建议不将'计算数据'置于状态，这就是isScrolledToTop。

作为一个FYI，如果您正在跟踪滚动位置，则窗口对象会将其保持为“状态”，可在window.scrollY处获得 - 您无需将其复制到组件的状态。