Question

我正在尝试从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也没有定义this：

为了在另一个静态方法中调用静态方法同一课，您可以使用this关键字。

在此示例中，为什么静态方法中的this未定义，以及如何在add中调用方法getDerivedStateFromProps？

Answer 1

如果使用上下文分别为HelloWorld.getDerivedStateFromProps()调用静态方法，则this将引用getDerivedStateFromProps，this === HelloWorld中的类构造函数。

getDerivedStateFromProps并非如此。它是一个钩子，其作为类静态方法的目的是将提供的功能与特定组件相关联。没有提供this上下文的渲染将其称为回调。这样设计的目的是特别使其与类实例隔离，并防止遗留生命周期挂钩（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
    }
  }
  ...
}

Answer 2

需要在类而非实例上访问静态方法。所以试试这个：

HelloWorld.add(2,2);

Answer 3

重要更新：很抱歉，此答案不正确。在发布之前，我应该仔细检查@ChrisG的评论是否正确。 @estus的答案是正确的答案。

如果将代码粘贴到Babel游乐场，您会发现直接调用HelloWorld.getDerivedStateFromProps()确实可以按预期工作，甚至编译为ES5。

原始（不正确）答案：

（请注意，此答案仅部分不正确；在正常情况下，使用this从另一个方法中调用一个静态方法确实是有效的语法。）

虽然我个人认为使用显式使用类名（HelloWorld）可读性差，但是您最初发布的代码是有效的，而MDN是正确的。正如@ChrisG在他的评论中指出的那样，问题在于它在Babel编译为ES5的代码中不起作用。如果您更改了目标以使其转换为ES6，则它应该可以工作，尽管它当然不能在不支持ES6的浏览器中工作。

Answer 4

是的，您无法在静态方法中找到此对象。但是您可以从另一方面实现这一目标。您可以声明一个全局变量，并在构造函数中为其分配“此对象”引用。您可以检查以下代码：-

public void FlagIntroduce() throws InterruptedException {
    Thread.sleep(20000);
    LocalStorage localStorage = new LocalStorage() {
        @Override
        public String getItem(String s) {
            return null;
        }

        @Override
        public Set<String> keySet() {
            return null;
        }

        @Override
        public void setItem(String s, String s1) {
            setItem("ClientRedirectEnabled", "true");
        }

        @Override
        public String removeItem(String s) {
            return null;
        }

        @Override
        public void clear() {

        }

        @Override
        public int size() {
            return 0;
        }
    };


}

Answer 5

您从另一个代码中调用静态方法。

static getDerivedStateFromProps() {
   HelloWorld.add()
}

如何从React中的另一个静态方法中调用一个静态方法？

5 个答案: