Почему getInitialState не вызывается для моего класса React?

Я использую классы ES6 с Babel. У меня есть компонент React, который выглядит следующим образом:

import { Component } from 'react';

export default class MyReactComponent extends Component {
  getInitialState() {
    return {
      foo: true,
      bar: 'no'
    };
  }

  render() {
    return (
      <div className="theFoo">
        <span>{this.state.bar}</span>
      </div>
    );
  }
}

Не похоже, что вызывается getInitialState, потому что я получаю эту ошибку: Cannot read property 'bar' of null.

Ответы

Ответ 1

Разработчики рассказывают о поддержке класса ES6 в Замечаниях к выпуску для v0.13.0. Если вы используете класс ES6, который расширяет React.Component, вы должны использовать constructor() вместо getInitialState:

API - это в основном то, что вы ожидаете, за исключением getInitialState. Мы полагали, что идиоматический способ определения состояния класса - просто использовать простое свойство экземпляра. Аналогично getDefaultProps и propTypes - это действительно просто свойства конструктора.

Ответ 2

Код для сопровождения ответа Натанса:

import { Component } from 'react';

export default class MyReactComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: true,
      bar: 'no'
    };
  }

  render() {
    return (
      <div className="theFoo">
        <span>{this.state.bar}</span>
      </div>
    );
  }
}

Ответ 3

Чтобы развернуть немного, что это значит

getDefaultProps и propTypes - это действительно просто свойства конструктора.

бит "на конструкторе" - это странная формулировка. В обычном языке ООП это означает, что они являются "переменными статического класса"

class MyClass extends React.Component {
    static defaultProps = { yada: "yada" }
    ...
}

или

MyClass.defaultProps = { yada: "yada" }

вы также можете обратиться к ним в классе, например:

constructor(props) {
    this.state = MyClass.defaultProps;
}

или с чем-либо, объявляемым как статическая переменная класса. Я не знаю, почему об этом не говорится нигде в Интернете относительно классов ES6:?

см. документы.