我正在使用componentWillReceiveProps生命周期事件来启用或禁用到下一页的转换。既然此事件已更改为UNSAFE_componentWillReceiveProps,我觉得我不再应该使用它,但是我找不到它的明显替代品。

组件的位置来自props.location.pathname,因此我需要一个事件,在该事件中,我可以访问上一个和下一个道具,然后根据是否应该进行过渡来设置组件的初始外观,但是:


getDerivedStateFromProps仅可以访问以前的道具。
shouldComponentUpdate应该用于告诉组件是否应该更新,这不是我们想要的,所以就可以了。
render没有以前的道具。
getSnapshotBeforeUpdate将参数传递给componentDidUpdate,此时组件已被渲染,因此无法设置初始外观。


我想我可以保存以前的路径名,下次在render中使用它,但这似乎不是一个很好的解决方案。在这种情况下,最佳做法是什么?

最佳答案

你说过

getDerivedStateFromProps only has access to the previous props.


但是getDerivedStateFromProps可以访问下一个道具和上一个状态

我同意,保存以前的路径名似乎不太好,但是这里提供了另一种方法:在https://codesandbox.io/s/rjyvp7l3rq中找到https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

看看uncontrolEmailInput组件将prev道具保存在状态中

state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }


这是一篇有关新生命周期的精彩文章:https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

关于javascript - 在React中,根据先前和当前的 Prop 在哪里设置状态?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52483121/

10-09 19:29