javascript – 如何从React中的另一个静态方法调用静态方法?

我试图从React组件中的另一个静态方法调用静态方法:

class HelloWorld extends React.Component {

  static add(a, b){
    return a + b;
  }

  static getDerivedStateFromProps(props, state){
    const sum = this.add(2, 2);    
    return {
      sum
    }
  }

  render() {
    return <div>Hello World</div>
  }
}

现场演示:https://codesandbox.io/s/rmxy909ovo

但是我得到的错误是这是未定义的,即使MDN says

In order to call a static method within another static method of the
same class, you can use the this keyword.

为什么在静态方法中这是未定义的,如何在此示例中调用getDerivedStateFromProps中的方法添加?

最佳答案
如果使用相应的上下文调用静态方法作为HelloWorld.getDerivedStateFromProps(),这将引用getDerivedStateFromProps中的类构造函数,这是=== HelloWorld.

getDerivedStateFromProps不是这种情况.它是一个钩子,它作为类静态方法的目的是将提供的函数与特定组件相关联.它在没有提供此上下文的情况下被渲染称为回调.它的设计就是专门用于将它与类实例隔离开来,并防止在遗留生命周期钩子(componentWillReceiveProps等)中常见的可能的误用.

这里真正的问题是add不应该是HelloWorld方法,因为它不属于该类.由于它无法访问组件实例,因此它只是一个使用该类作为命名空间的函数.在现代JS中使用类作为命名空间是反模式.相反,它可能是:

function add(a, b){
  return a + b;
}

class HelloWorld extends React.Component {
  static getDerivedStateFromProps(props, state){
    const sum = add(2, 2);    
    return {
      sum
    }
  }
  ...
}

转载注明原文:javascript – 如何从React中的另一个静态方法调用静态方法? - 代码日志