Reactの基本的な構文 ①親のStateを子のPropとして渡す構文

· 1782 words · 4 minute read

はじめに

最近仕事でReactを使い始めました。

Reactの基本的な構文で、よくある処理だけれどもつまづきポイントがあるものにいくつか遭遇しました。

この記事では、Reactの初心者の方に向けて
最初に理解しておいた方がいい基本的な構文について複数回に分けて紹介します。

読んだもの

Reactでは、親Componentが持つStateの値を、子Component側でpropsを通して受け取るという設計をよく使います。

今回はその構文を説明します。

親Componentの書き方

まず、親Component内で子Componentを呼び出すには、子Componentの名前をタグ名にします。（※1）

次に、子Componentに親ComponentのStateの値を渡すには、タグの属性を使います。（※2）

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value1: 'hoge',
      value2: 'fuga'
    };
  }

  render() {
    return (
      <div>
        // 親Componentで子Componentを呼び出す
        // タグ名は子Componentの名前を使う（※1）
        <FunctionalChild value={this.state.value1} />
        // 任意の名前の属性(ここではvalue)をつくり、Stateの値を渡す（※2）
        <ClassChild value={this.state.value2} />
      </div>
    );
  }
}

子Componentの書き方

ReactのComponentにはfunctional ComponentとClass Componentがあります。

親Componentは性質上必ずClass Componentになりますが、子Componentはどちらの形もとることができます。

①functional Componentの場合

子Component内で親Componentの値を読み取るときに、propsを使います。

const FunctionalChild= (props) => (
  <div>
    {props.value}
  </div>
);

②Class Componentの場合

Class Componentの場合は thisをつけます。

class ClassChild extends React.Component {
  render() {
    return (
      <div>
        {this.props.value}
      </div>
    );
  }
}

なぜClass Componentではthisを使うのかについては、こちらの記事（JavaScriptのthisをわかりやすく整理する（関数とメソッド編））もご参照ください。

コードの全体像

下記はコードの全体像です。

// 親Component
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value1: 'hoge',
      value2: 'fuga'
    };
  }

  render() {
    return (
      <div>
        // 親Componentで子Componentを呼び出す
        <FunctionalChild value={this.state.value1} />
        <ClassChild value={this.state.value2} />
      </div>
    );
  }
}

// 子Component
// ①functional Componentの場合
const FunctionalChild= (props) => (
  <div>
    // 子Component内で親Componentの値を読み取る
    {props.value}
  </div>
);

// ②Class Componentの場合
class ClassChild extends React.Component {
  render() {
    return (
      <div>
        // 子Component内で親Componentの値を読み取る（※2）
        {this.props.value}
      </div>
    );
  }
}


// =>
// hoge
// fuga
// とブラウザに表示される

【重要】Component間のやり取りと親子関係

ここでひとつ注意点があります。

子Componentで受け取ったpropsの値は読み取り専用となるため、子Component側で変更することはできません。

これはReactのComponentと親子関係の基本的な考え方に基づいています。

Reactでは、Componentが持つ値をまずはPropsとして考えます。
その上で、変更されうる値があればそれをStateとして定義します。

子Componentは値を使うだけ（Props）で、親Componentが値を管理する（State）という関係がReactの基本になります。


react-guide | props vs stateのStateとPropsのできること/できないことについての表がわかりやすかったので、翻訳しました。

PropsState
親Componentの初期値を渡せるか?YesYes
親Componentによって値が変えられるか?YesNo
Component内でデフォルト値を定義できるか? *YesYes
Component内で値が変えられるか?NoYes
子Component内で初期値を定義できるか?YesYes
子Component内で値が変えられるか?YesNo

* PropsもStateも、Component内で定義したデフォルト値は親Componentの初期値によって上書きされるという点は同じ。

おわりに

Propsを通してStateの値を受け取る構文のサンプルを紹介しました。

次回は②イベントハンドラを設定するときの構文を紹介します。

JavaScript React

関連記事