Question

如何在静态getDerivedStateFromProps内部调用组件函数？

这是我的代码

class Box extends Component {

  updateVariables() {
    this.statColorClass = "no-change";
    if(this.props.dir === "up") {
      this.statColorClass = "up";
      this.dirIcon = <GoArrowUp />;
    } else if (this.props.dir === "down") {
      this.statColorClass = "down";
      this.dirIcon = <GoArrowDown />;
    }
  }
  static getDerivedStateFromProps() {
    this.updateVariables(); // not working
  }
 render() {}
}

第this.updateVariables();行无效。我怎么称呼updateVariables()？

Answer 1

此方法无权访问组件实例。如果要重用功能，则可以在类外部创建纯组件。该函数的全部目的是将props转换为新状态，这是静态函数应返回的状态。它无意引起副作用。不知道为什么要使用实例变量来处理状态。

Answer 2

getDerivedStateFromProps旨在根据收到的道具更新组件状态。故意将其设计为不允许访问组件实例。

statColorClass等属性表示组件状态，但它们不是state的一部分，这在React有状态组件中很少需要。适当的解决方案是重构组件以使用state：

  static getDerivedStateFromProps(props, state) {
    state = {...state, statColorClass: "no-change" };

    if (props.dir === "up") {
      state.statColorClass = "up";
      state.dirIcon = <GoArrowUp />;
    } else if (props.dir === "down") {
      state.statColorClass = "down";
      state.dirIcon = <GoArrowDown />;
    }

    return state;
  }

如何在getDerivedStateFromProps中访问组件函数

2 个答案: