React コンポーネントのプロパティ

React コンポーネントには、属性を記述するのと同様の方法でプロパティを設定することができます。

例えば次のように、firstName というプロパティをコンポーネントに設定できます。

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(
  <Greeting firstName="Hanako"/>,
  document.getElementById('root')
);

コンポーネントのコード内では、this.props.<プロパティ名> として参照できます。

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hi {this.props.firstName} san!</h1>;
  }
}

export default Greeting;

これを実行すると、次のようになりました。

確かに Greeting タグにプロパティとして渡した値が、コンポーネント内で 参照できていることがわかりますね。

クラス継承でプロパティは？

ES6 で class ... extends でクラスの継承ができるようになりました。

クラスの継承をした時にプロパティがどのように参照できるかみてみましょう。

まずは次のように Animal クラスを定義します。

import React from 'react';

export default class Animal extends React.Component {

  render() {
    return <h1>Hello!</h1>;
  }

  saySomething(){
    return <p>My name is {this.props.firstName}.</p>
  }
}

次にAnimal クラスを継承する形で、Cat クラスを定義します。

import React from 'react';
import Animal from './Animal';

export default class Cat extends Animal {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        <h2>I'm a cat. </h2>
        {super.saySomething()}
      </div>
    );
  }
}

ここで constructor にて、prop を受取り、super にそれを渡すことで基底クラス (すなわち、この場合 Animal クラス) のコンストラクタに prop を渡しています。

上記のコンポーネントクラス (Animal と Cat) を利用するコードを次のようにして動作確認をします。

import React from 'react';
import ReactDOM from 'react-dom';
import Animal from './Animal';
import Cat from './Cat';

ReactDOM.render(
  <div>
    <Animal/>
    <Cat firstName="Tora"/>
  </div>,
  document.getElementById('root')
);

確かに次のように super クラス内の saySomething メソッドが呼ばれて、そこで prop が利用できていることがわかります。

console.log でチェックするとわかりますが、確かに constructor に props は渡されています。

しかしながら、ES6 では constructor を明示的に宣言しない場合は、デフォルトのコンストラクタが自動的に作成されます。

このため上記 Cat クラスではコンストラクタを作成しなくても問題なく動作します。しかし、constructor を明示的に記述する場合は、 super(prop) を呼び出すのを忘れずに行ってください。