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

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

Propsとは？

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

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

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

//コンポーネントの作成
function MyComponent(props) {
  return (
    <div>props1 : {props.myPropsName1} props2 : {props.myPropsName2}</div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <MyComponent myPropsName1="マイプロップス" myPropsName2="まいぷろっぷす"　/>,
  document.getElementById('app')
);

スプレッド演算子で展開

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

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

//コンポーネントの作成
function MyComponent(props) {
  return (
    <div>props1 : {props.myPropsName1} props2 : {props.myPropsName2}</div>
  )
};
//Propsの定義
const myProps = {
  myPropsName1 : 'マイプロップス' ,
  myPropsName2 : 'まいぷろっぷす'
}
//コンポーネントの描画
ReactDOM.render(
  <MyComponent {...myProps}>,
  document.getElementById('app')
);

分割代入で展開

Propsで引き渡される値はオブジェクトのためJavaScriptの分割代入を利用して取得することも可能です。

//コンポーネントの作成
 function MyComponent(props) {
  const {myPropsName1 , myPropsName2} = props
   return (
     <div>props1 : {myPropsName1} props2 : {myPropsName2}</div>
   )
 };

引数内で分割代入を行うとソースコードもシンプルになります。

//コンポーネントの作成
 function MyComponent({myPropsName1 , myPropsName2}) {
   return (
     <div>props1 : {myPropsName1} props2 : {myPropsName2}</div>
   )
 };

分割代入時に初期値を指定することでPropsが未定義の場合に受け渡される値が設定可能です。

//コンポーネントの作成
 function MyComponent({myPropsName1 , myPropsName2="初期値の値"}) {
   return (
     <div>props1 : {myPropsName1} props2 : {myPropsName2}</div>
   )
 };

React.ComponentでのPropsの定義

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

//コンポーネントの作成
class MyComponent extends React.Component {
  render() {
    return (
      <div>props1 : {this.props.myPropsName1} props2 : {this.props.myPropsName2}</div>
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
   <MyComponent myPropsName1="マイプロップス" myPropsName2="まいぷろっぷす"　/>,
  document.getElementById('app')
);

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