Как вызвать статический метод из другого статического метода в React?

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

Но я получаю ошибкучто this не определено, хотя MDN говорит :

Чтобы вызвать статический метод в другом статическом методе того же класса, вы можете использовать ключевое слово this.

Почему this в статическом методе не определено и как вызвать метод add в getDerivedStateFromProps в этом примере?

Answer 1

Да, вы не можете найти этот объект в статическом методе.Но вы можете достичь этого в другой руке.Вы можете объявить глобальную переменную и назначить ссылку на этот объект в конструкторе.Вы можете проверить ниже код: -

import React, {Component} from 'react';
var _this;
class Toastr extends Component{
  constructor(props){
    super(props)
    this.state={
      visible: 'hide'
    }
    _this = this
  } 

  static handleShow = (isSuccess, message, code) => {
    _this.setState({visible: 'show', message: message})
    setTimeout( function(){
      _this.setState({visible: 'hide'})
    }, 3000)
  }

  render(){
    return(
      <div aria-live="polite" aria-atomic="true" className="toast-conatiner">
        <div className="toast-position">
           <div className={`toast ${this.state.visible}`} role="alert" aria-live="assertive" aria-atomic="true">
             <div class="toast-body">
                <span className={this.state.isSuccess ? 'text-success' : 'text-danger'}>{this.state.message}</span>
             </div>
           </div>
         </div>
       </div>
     );
   }
 }

 export default Toastr;

Answer 2

Если статический метод вызывается с соответствующим контекстом как 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 3

Статический метод должен быть доступен для класса, а не для экземпляра.Так что попробуйте:

HelloWorld.add(2,2);

Answer 4

ВАЖНОЕ ОБНОВЛЕНИЕ: Этот ответ неверный, извините.Я должен был еще раз проверить, что комментарий @ ChrisG был правильным, прежде чем опубликовать его.Ответ @ estus является правильным.

Если вы вставите свой код на игровую площадку Babel, вы увидите, что вызов HelloWorld.getDerivedStateFromProps() напрямую действительно работает, как вы и предполагали, даже при компиляции в ES5.

---

Оригинальный ( неправильный ) ответ:

(Обратите внимание, что этот ответ является только частично неправильным; использование this для вызова одного статического метода из другого действительно допустимый синтаксис в обычных обстоятельствах.)

Хотя я лично не нахожу его таким понятным, как использование имени класса (HelloWorld) в явном виде, код, который вы первоначально разместили, действителен, а MDN верен.Как отметил @ChrisG в своем комментарии, проблема в том, что он не работает в коде, переданном Бабелем на ES5.Если вы измените цель так, чтобы она переносилась на ES6, она должна работать, хотя, конечно, она не будет работать в браузерах, которые не поддерживают ES6.

Answer 5

Вы вызываете статический метод из другого кода, см. Ниже.

static getDerivedStateFromProps() {
   HelloWorld.add()
}