【React.js】親から子コンポーネントへpropsで値を渡す

React初心者

Reactで親コンポーネントから、子コンポーネントに値を受け渡すには、propsを使うって知ってるけど、よくわからない。。。(泣)

こういった声に答えていきます。

React.jsにおけるpropsの使い方については、Reactの公式チュートリアルのデータを Props 経由で渡すで学ぶことです。しかし、初学者にいきなりチュートリアルはきつい(私の実体験)ので、この記事では簡単な例を示しながら、私なりに説明していきます。

私は、React.jsを学び始めて10日の初心者で、自分の学習の復習としての意味もあり、今回のような記事を書きました。私のような初心者の方の参考になればと思います。

親から子コンポーネントへ値を渡す

まず、

  • 親の関数コンポーネント(Parent
  • 子の関数コンポーネント(Child

を定義します。

そして、Childコンポーネント内で変数childを定義します。Parentコンポーネント内に<Child />と書いて、子コンポーネントの内容を親コンポーネントに反映させます。

この時点では、以下のように表示されます。

と〜げ

ちなみに、”子” を中央に表示させるには、App.cssに以下を書くと良いでしょう。

と、ここまで準備です。ここから本番です。

Parentコンポーネント内に、const parent = "親" を定義します。このparentをChildコンポーネントに渡してみます。<Child /> に以下のように書きます。

と〜げ

ちなみに、oya = {parent} parent = {parent} と書くのが一般的なようです。今回は説明しやすいように、oyaを使いました。

そして、Childコンポーネントで propsを引数としてfunction Child(props)と書きます。そして、return内で、{props.oya}と書くことで、Parentコンポーネントのparentを表すことができます。

親のParentコンポーネントの<Child /> 内の oya = {parent} oyapropsのアイテムのkeyになり、{parent} propsのアイテムのvalueになるイメージです。※ アイテムは{oya: parent}のような形をいいます。

props = {oya: parent}

なので、{props.oya}と書くことで、parentを表すことができます。

そうすると、以下のように表示されます。

親のParentコンポーネントから子のChildに渡した{parent}を、Childコンポーネント内のreturn内で{props.oya}と書いて、parentをpropsによって渡し、親のParentコンポーネントの<Child />によって、「親」と表示させてます。

最後に、全コードを示します。

親から子コンポーネントへ値を渡す方法はわかったけれど、子から親コンポーネントへ値を渡す方法についてはこちらの記事を読んでください。関連記事【React.js】子から親コンポーネントへ値を渡す

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です