2016-11-05 10 views
14

学習がdocsから反応し、この例に出くわした:Reactコンストラクタでsuper()を呼び出すのは何ですか?

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

Mozillaによると、スーパーでは、コンストラクタでthisを使用することができます。スタンドアローンを使用する理由は他にありますか?(私はsuperでは親クラスのメソッドにもアクセスできると知っていますが)Reactを使用すると、super()を呼び出すだけの他のユースケースがありますか?

答えて

17

は、コンストラクタを持つ場合にのみリアクションコンポーネント内で呼び出されます。例えば、以下のコードは、スーパーは必要ありません。我々はコンストラクタを持っている場合

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を使用していない場合でも、ES6 class constructors MUST call super if they are subclassesのため、コンストラクタ内にsuper()が必要です。したがって、コンストラクタを持っている限り、super()に電話する必要があります。 (しかし、サブクラスはコンストラクタを持つ必要はありません)。

我々は例えば、this.propsを使用する必要があれば私たちは、コンストラクタ内super(props)を呼び出す:

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

    } 
} 

私はそれを明確にすることを願ってい。

+0

コンポーネント内のコンストラクタを持つ主な目的は、コンポーネントの初期化直後に何らかのアクションをとることですか? superはあなたに1.)「this」と2へのアクセスを許可します。)それがパラメータとして小道具を取る場合、その親小道具へのアクセス? – stackjlei

+0

スーパーで親コンポーネントの小道具にアクセスできますか? – stackjlei

+0

スーパーの –

12

super()は、parentクラスのconstructorを呼び出します。これは、親クラスからいくつかの変数にアクセスする必要がある場合に必要です。

リアクションでは、superに小道具をかけてください。 Reactはpropsをコンポーネント全体でthis.propsから利用できるようにします。 2 super()super()

class A { 
 
    constructor(props) { 
 
    this.props = props 
 
    } 
 
} 
 

 
class B extends A { 
 
    constructor(props) { 
 
    super(props) 
 
    console.log(this.props) 
 
    } 
 
} 
 

 
console.log(new B({title: 'hello world'}))

有する
class A { 
 
    constructor() { 
 
    this.a = 'hello' 
 
    } 
 
} 
 

 
class B extends A { 
 
    constructor(){ 
 
    console.log(this.a) //throws an error 
 
    } 
 
} 
 

 
console.log(new B())

せず

以下の例を参照してください

希望します。

+0

+1で親コンポーネントの小道具にアクセスすることはできません。あなたはあなたの答えを短くすることもポイントにすることもできます。 – a20

-2

このキーワードを使用するには、その前にsuperキーワードを使用する必要があります。何?、はい!,スーパーは親クラスのコンストラクタを呼び出すために使用されます。ここで、親コンストラクタを呼び出す必要があるのはなぜですか?答えは、このキーワードを通して参照しているプロパティ値を初期化することです。

関連する問題