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

【问题标题】：How can I define state based on another state property?如何根据另一个状态属性定义状态？
【发布时间】：2016-08-13 20:49:11
【问题描述】：

我来自 Ember 世界，如果这个问题非常基本（我敢肯定），我深表歉意。我有一个组件，它在窗口滚动时设置状态“scrollPosition”。我想定义一个新的状态属性“isScrolledToTop”，当“scrollPosition”为0时它等于true。

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

【问题讨论】：

【解决方案1】：

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

如果您想在滚动位置位于页面顶部时呈现不同的内容（例如全尺寸标题），那么逻辑将进入您的 render() 方法零件。比如：

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

This part 的文档建议不要将“计算数据”置于状态，isScrolledToTop 就是这样。

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

【讨论】：