【React】props

propsとは

propsとはコンポーネントに対して定義する値で親コンポーネントから子コンポーネントへ値を渡すための仕組みです。
子コンポーネントでは引数で受け取った値や関数を利用することができます。

props使い方

例えば記事を表示するような子コンポーネントArticleがあったとして、タイトルなどを直接子コンポーネントに書いているとコンポーネントのメリットである再利用のメリットが薄れてしまいます。
そのため動的な部分はpropsでデータを受け渡してあげるようにします。
 
 
実際の使い方を見てみましょう。

 
子コンポーネント（Article.jsx)
子コンポーネントで親コンポーネントからtitle,category,イメージ画像、textをpropsとして受け取っています。

import '../css/article.css';

const Article = (props) => {
    return(
        <article>
            <header>
                <h2>{props.title}</h2>
                <p>カテゴリ：{props.category}</p>
            </header>
            <div className='image'>
                <img src={props.image} alt="カフェ画像" />
            </div>
            <p>{props.text}</p> 
        </article>
    );
}

export default Article;

 
 
親コンポーネント(App.jsx)
例としてpropを{}で記述し、各項目の変数を渡しています。直接文字列を渡すことも可能です。

import Article from "./components/Article";
import cafeMenu_01 from "./images/cafeMenu_01.jpg";　

function App() {
  const titleApp ='春限定メニュー登場しました';
  const categoryApp = 'デザート';
  const textApp ='いちごや栗など抹茶など12種類の素材を使用した限定メニューです';
  return (
    < Article 
     title={titleApp}
     category={categoryApp}
     text={textApp}
     image={cafeMenu_01}
    />
  );
}
export default App;

 
 
以下のようにpropsで渡して子コンポーネントArticleの部分を表示することができました。

参考

公式ドキュメント