React.jsを学んでいく学習記録になります。
今までの記録はこちらから。

propsについて

WEBアプリケーションを作っていってるのですが、Modal機能を実装する際にpropsを使用したので、
メモ程度になりますが、書き留めておきます。

propsはVue.jsでも触ったことがあり、僕の認識ではコンポーネント間のデータ受け渡しができるという感じです。

まずは簡単に記述していきます。

src/test.js

import React from 'react'

const ChildrenTest = () => {
  return (
    <div>
      子コンポーネント
    </div>
  )
}

const ParentTest = () => {
  return (
    <div>
      親コンポーネント
      <ChildrenTest />
    </div>
  )
}

export default ParentTest

・・・これコンポーネントできてますよね？
独学だと合っているか本当に分からないので不安ですので、間違っていたら教えて頂けますと幸いでございます

上記を記述すると、ParentTestの内容とChildrenTestの内容が表示されていると思います。

じゃあ、ParentTestでの値をChildrenTestに渡したい時はどうすればいいの？って時に活躍するのが、propsです！！

例えば親コンポーネント(ParentTest)の値を子コンポーネント(ChildrenTest)に渡して表示したい場合、まずは子コンポーネントを呼び出している後ろに渡したい値を追加してあげます。

src/test.js

import React from 'react'

const ChildrenTest = () => {
  return (
    <div>
      子コンポーネント
    </div>
  )
}

const ParentTest = () => {
  const text = "最近寒いですね"
  return (
    <div>
      親コンポーネント
      <ChildrenTest text={text} />
    </div>
  )
}

export default ParentTest

子コンポーネントのtextにtext(最近寒いですね)を渡しています。
では、それをどう受け取るかというと、

src/test.js

import React from 'react'

const ChildrenTest = (props) => {
  return (
    <div>
      子コンポーネント:{props.text}
    </div>
  )
}

const ParentTest = () => {
  const text = "最近寒いですね"
  return (
    <div>
      親コンポーネント
      <ChildrenTest text={text} />
    </div>
  )
}

export default ParentTest

こうすることで、無事コンポーネント間の値の受け渡しに成功しているはずです。

ちなみに今回は関数コンポーネントで実装していますが、クラスコンポーネントの際では記述の仕方が大きく変わってくるので、注意が必要です。

最後に

今回のサンプルでは実用的なイメージは沸かないと思いますが、
僕自身の備忘録として残しておきます。

何か間違いがあれば、ご指摘頂けますと幸いでございます。

React.js 勉強 #3

propsについて

最後に