reactjs - 动画和 getDerivedStateFromProps

Question

随着 componentWillReceiveProps 被弃用并且替换 getDerivedStateFromProps 返回最终状态，我将如何随着时间的推移逐渐改变状态(即为某些东西设置动画)使用新的 getDerivedStateFromProps？

使用componentWillReceiveProps，以下工作正常:

state = {
  itemOpacity: new Animated.Value(0.25)
};

componentWillReceiveProps(nextProps) {
  if (this.props.items.visible !== nextProps.items.visible) {

    let value = 0;

    if (nextProps.items.visible) {
      value = 1;
    }

    Animated.timing(this.state.itemOpacity, {
      toValue: value,
      duration: 200,
    }).start();
  }
}

我如何使用getDerivedStateFromProps做这样的事情？或者我的动画模式很愚蠢？

Answer 1

使用 newProps 和 previousState 参数调用 getDerivedStateFromProps。所以你可以使用 previousState 来制作动画:

static getDerivedStateFromProps(nextProps, prevState) {

  let value = 0;
  if (nextProps.items.visible) {
    value = 1;
  }

  Animated.timing(prevState.itemOpacity, {
    toValue: value,
    duration: 200,
  }).start();

  return {
    // update state
  }
}