Posted in React

[React] Components propsの使い方

   Published Date: 2023年12月8日

Reactのコンポーネントの使い方についてです。Reactでは「src」ディレクトリの中に「components」というディレクトリを作り、その中でコンポーネントファイルを管理します。

いちばん簡単な例としては「App.jsx」でコンポーネントファイルを読み込んで使うというのがあります。まず、デフォルトの「App.js」のファイル名を「App.jsx」に変更し、デフォルトで記載されているソースを削除し、下記を記載します。

propsを使わない簡単な例

import Article from './components/Article';

function App() {
    return(
        <div>
            <Article />
       </div>
    );
}

export default App;

1行目でこれから作成するコンポーネントファイル「Article.jsx」を読み込んでいます。Appという関数の中でArticleというコンポーネントを実行する簡単なプログラムです。

次に子コンポーネントを作成します。

const Article = ()=>{
    return <h3>Hello World!</h3>
};

export default Article;

Articleという関数を作り、「<h3>Hello World!</h3>」というHTMLを返します。

これで子コンポーネントのArticleが親の<Article />の部分で実行され表示されます。

今回のファイル構成は以下のようになります。

propsを使った親から子へデータを渡す方法

親から子コンポーネントに値を渡します。今回はtitle, name, age の3つの値を渡してみたいと思います。

<Article />の中に以下の内容を記載します。

表示したい項目名　= {‘表示させたい文字列’}　の形式で書きます。

import Article from './components/Article';

function App() {
    return(
        <div>
            <Article
            title={'Sample Page'}
            name={'Taro'}
            age={'30'}
            />
       </div>
    );
}

export default App;

次に子コンポーネントを作成します。

const Article = (props)=>{
    return (
        <div>
            <h3>{props.title}</h3>
            <p>{props.name}</p>
            <p>{props.age}</p>
        </div>

    ) ;
};

export default Article;

アロー関数の中にpropsという変数を記載します。受け取りたい変数を{props.変数名}の形式で記載します。これで親から子にデータが渡ります。

※returnの中にHTML要素を複数並べるときは、親が必要です。今回は<div>で囲んだ中に<h3><p>タグを並列で並べています。ReactではFragmentというものが用意されており、<div>の代わりに<Fragment>というものを使うことができます。<Fragment>はWebで描画されるときには何も表示されないという特徴があります。

propsで渡すことができるデータ

propsでは以下のデータを渡すことができます。ほとんどなんでも渡せます！

  • 文字列
  • 数字
  • 変数
  • 真偽値（True or False）
  • 配列
  • オブジェクト

コンポーネントを複数箇所で利用

今度はコンポーネントを複数回呼び出ししてみます。App.jsxの<Article />部分を２つ記載します。

import Article from './components/Article';

function App() {
    return(
        <div>
            <Article
            title={'Sample Title1'}
            name='Taro'
            age={'30'}
            />
            
            <Article
            title={'Sample Title2'}
            name='Jiro'
            age={'40'}
            />
       </div>
    );
}

export default App;

これが実行されると下記の様に表示されます。



Author: webmaster