1. ホーム
  2. javascript

[解決済み] Reactのコンストラクタでsuper()を呼び出すとどうなるのか?

2023-03-28 16:16:02

質問

Reactの学習について ドキュメント を読んでいて、この例に出会いました。

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

によると モジラ によると、super では this をコンストラクタで使用することができます。他に何かスタンドアローンの super (私が知っているのは super で親クラスのメソッドにアクセスできることは知っていますが、React では、単に super() を単体で呼び出す以外に使い道はあるのでしょうか?

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

super() は、リアクトコンポーネントの内部で、コンストラクタを持つ場合にのみ呼び出されます。例えば、以下のコードではsuperは必要ありません。

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

しかし、もしコンストラクタがあるのなら super() は必須です。

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

その理由は this の前に許可されないのは super()this が初期化されていないためです。 super() が呼び出されないと初期化されません。しかし、たとえ this を使っていなくても super() はコンストラクタの内部で ES6 class constructors MUST call super if they are subclasses . したがって super() を呼び出す必要があります。(ただし、サブクラスはコンストラクタを持つ必要はない)。

私たちは super(props) を使用する必要がある場合は、コンストラクタの内部で this.props などとする。

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

わかりやすくできたかな。