【React入門⑤】propsを使ってコンポーネントを描画する

こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

Propsとは

Propsはプロップスと読みますが、これは

「コンポーネントに値を渡すためのインターフェースである」

という認識で良いでしょう。

propsを使用することによって、コンポーネントから他のコンポーネントへ値を受け渡すことが可能です。

propsを使用してみる

実際にpropsを使用して、App.jsからhello.jsに値を受け渡してみましょう。

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';

ReactDOM.render(
  <Hello greet='Good Morning'/>, // greetというpropsでGood Morningという文字列を受け渡す
  document.getElementById('root')
);

src/components/hello.js

import React, { Component } from 'react';

const Hello = (props) => <div>{props.greet}, everyone!</div> // { }の中にpropsと値を入れることで出力できる

export default Hello;

このように記述することで、propsによる値の受け渡しができているということがわかるはずです。

複数の値をpropsで渡す

複数の値をpropsを使用して他のコンポーネントへ渡すこともできます。

src/components/hello.js

import React, { Component } from 'react';

const Hello = (props) => {
    const { greet, name } = props.data; //分割代入
    return (
        // returnで返す要素は1くくりにしなければいけない
        <div>
            <p>{greet}, everyone!</p>
            <p>My name is {name}.</p>
        </div>
    )
}
export default Hello;

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';

const data1 = {
  greet: 'Good Morning',
  name: 'Takashi'
};
const data2 = {
  greet: 'Good Evening',
  name: 'Takako'
};


ReactDOM.render(
  <div>
    <Hello data = {data1} />,
    <Hello data = {data2} />,
  </div>,
  document.getElementById('root')
);

上記のようにApp.jsで渡すpropsの形式を変えることで、複数のpropsを渡すことが可能です。

propsで受け取った配列をリストレンダリングする

配列型のデータをリスト形式で描画する（リストレンダリング）することはよくありますので、そちらの方法も見ていきましょう。

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';

const greeting = ['Good Morning', 'Good Afternoon', 'Good Evening']; // 配列を変数に格納


ReactDOM.render(
  <Hello data = {greeting} />, // 変数をdataという名前のpropsで渡す
  document.getElementById('root')
);

src/components/hello.js

import React, { Component } from 'react';

const Hello = (props) => {
　// props.dataで受け取った配列をmap関数で展開し、greetingという個に分ける
    const greetings = props.data.map((greeting) => {
　　　　　// 個に分けた配列の要素を<li>として返す
        return <li>{greeting}</li>
    });
    return (
        <ul>
            {greetings}
        </ul>
    )
}
export default Hello;

props.childrenを使用する

props.childrenを使用してコンポーネントに値を渡す方法もあります。

src/App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './components/hello';


ReactDOM.render(
  <Hello>Hello, Good Morning.</Hello>, // props.children
  document.getElementById('root')
);

src/components/hello.js

import React, { Component } from 'react';


const Hello = (props) => {
    return <p>{props.children}</p> //props.childrenで出力できる
}
export default Hello;

src/App.jsに渡したprops.childrenはタグの中に他のタグを入れたり、他のコンポーネントを入れたりすることもできます。