Propsとは？

「React入門」の前回はReactのコンポーネントについて解説を行いました。

ReactのコンポーネントではPropsとStateと呼ばれる値でUIの状態や情報を管理しており、今回は情報を管理するPropsについて解説を行います。

Propsはコンポーネント利用時に属性として設定ができる値で、一度設定してしまえば後から変更ができません。

以下はMyComponentコンポーネントの利用時に「myPropsName1」と「myPropsName2」という2つのPropsを設定しています。

設定したPropsはMyComponent内のメソッドでthis.propsというオブジェクトで利用が可能です。

//コンポーネントの作成
class MyComponent extends React.Component {
  render() {
    return (
      
        props1 : {this.props.myPropsName1}
        props2 : {this.props.myPropsName2}
      
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

Stateless Functionsで利用

Stateless Functionsでは引数としてPropsが引き渡されますので、引数にpropsとして定義すればpropsオブジェクトで利用が可能です。

//コンポーネントの作成
function MyComponent(props) {
  return (
    
      props1 : {props.myPropsName1}
      props2 : {props.myPropsName2}
    
  )
};
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

スプレッド演算子で展開

JSXの基本で解説したとおりJSXではスプレッド演算子( … )を用いてオブジェクトを展開して設定することもできます。

定義したいPropsが複数ある場合は以下のようにオブジェクトとして定義しておきまとめてコンポーネントに引き渡すことも可能です。

//コンポーネントの作成
function MyComponent(props) {
  return (
    
      props1 : {props.myPropsName1}
      props2 : {props.myPropsName2}
    
  )
};
//Propsの定義
const myProps = {
  myPropsName1 : 'myPropsValue1' ,
  myPropsName2 : 'myPropsValue2'
}
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

defaultProps

defaultPropsとしてPropsの初期値が設定できます。初期値を設定しておけば属性としてPropsが定義されていなくてもPropsが利用できるようになります。

作成したコンポーネントにdefaultPropsプロパティとしてdefaultPropsが定義できます。

//コンポーネントの作成
function MyComponent(props) {
  return (
    
      props1 : {props.myPropsName1}
      props2 : {props.myPropsName2}
    
  )
};
MyComponent.defaultProps = {
  myPropsName1: 'myPropsValue1' ,
  myPropsName2: 'myPropsValue2'
};
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

propTypes

propTypesでpropsで指定できる値の型を定義することも可能です。

以下ではmyPropsName1にはstring型、myPropsName2にはnumber型を指定しています。

//コンポーネントの作成
function MyComponent(props) {
  return (
    
      props1 : {props.myPropsName1}
      props2 : {props.myPropsName2}
    
  )
};
MyComponent.propTypes = {
  myPropsName1: React.PropTypes.string ,
  myPropsName2: React.PropTypes.number
};
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

上記のサンプルではmyPropsName2に文字列が指定されています。この場合はコーンソール上に型が間違っている旨がエラーメッセージとして表示されます。

myPropsName2に指定する値を”1″から{1}とするとnumber型の値を指定できるためエラーが表示されなくなります。

//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

propTypesにはstringやnumber以外にも様々な値が指定できるので公式のドキュメントでどのような値が指定できるか確認しておいてください。

Class Property Declarations

現在ECMAScriptとして策定中のClass Property Declarationsという機能を利用するとclass定義時にdefaultPropsやpropTypesを静的メンバとして定義できるようになります。

Class Property DeclarationsはこれまでのBableの設定では利用できません。コンパイル機能にClass Property Declarationsを追加しておく必要があります。

まず、以下のコマンドでbabel-plugin-transform-class-propertiesをインストールし、

npm install --save-dev babel-plugin-transform-class-properties

.baelrcの値を以下のように指定しておきます。

{
  "presets": ["es2015","react"],
  "plugins": ["transform-class-properties"]
}

そうすると以下のようにstatic defaultPropsやstatic propTypesといった静的メンバとしてdefaultPropsやpropTypesが指定できるようになります。

//コンポーネントの作成
class MyComponent extends React.Component {
  static defaultProps = {
    myPropsName1: "string",
    myPropsName2: 1
  }
  static propTypes = {
    myPropsName1: React.PropTypes.string ,
    myPropsName2: React.PropTypes.number
  }
  render() {
    return (
      
        props1 : {this.props.myPropsName1}
        props2 : {this.props.myPropsName2}
      
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  ,
  document.getElementById('app')
);

Class Property Declarationsはまだ策定中(Stage2)の機能のため仕様が変更される恐れがありますので利用する場合はそのリスクを考慮した上で利用してください。

次回はStateについて解説を行います。