1. ホーム
  2. reactjs

React.Componentを継承したクラスがReactでgetInitialStateを使えない件

2023-08-06 04:03:14

質問

ReactでES6構文を試行錯誤しており、以下のようなコンポーネントを書いています。

export default class Loginform extends React.Component {
    getInitialState() {
        return {
          name: '',
          password: ''
        };
    };
}

と表示されるのですが、ブラウザがワーニングを投げてきます。

警告: getInitialStateは、プレーンなJavaScriptクラスであるLoginformで定義されています。 クラスで定義されています。を使用して作成されたクラスに対してのみサポートされています。 で作成されたクラスにのみサポートされています。代わりにstateプロパティを定義するということでしょうか?

従来の構文で処理できる var Loginform = React.createClass で処理できますが、正しいES6構文とは何でしょうか?

もう一つちょっとしたことですが、従来の構文では React.createClass はオブジェクトなので、その中の関数はカンマで区切られていますが extends の場合はセミコロンで区切りますが、の場合はセミコロンで区切らないといけないので、よくわかりません。

どのように解決するのですか?

ES6のクラスメソッド宣言の間にセミコロンやカンマは必要ありません。

ES6クラスの場合 getInitialState は非推奨となり、コンストラクタで初期状態のオブジェクトを宣言することが推奨されます。

export default class Loginform extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
}