Ugo

Webエンジニアのためのプログラミング情報サイト

  • ReactのPropsを使いこなす！コンポーネントを自在に変化させる。

ReactのPropsを使いこなす！コンポーネントを自在に変化させる。

ReactのPropsを使いこなす！コンポーネントを自在に変化させる。

この記事では、ReactのPropsの使い方について初心者向けに説明していきたいと思う。

PropsはJSXの記法と並んでReactを攻略するうえでカギとなる存在。

この記事では、Propsがどんなものなのか、また実践においてどう使われるかサンプルのコードとも見ていきたいと思う。

目次

ReactのPropsとは？

Reactアプリは幾つものコンポーネントが組み合わさって構成される。

Propsはそのコンポーネント同士で情報を受け渡す引数のようなものであり、ReactではこのPropsを使うことによってコンポーネントの表示内容を変化させることができる。

Propsの使い方

早速Propsの使い方を見ていこう。

ここではバックグランドの色をカスタイズ可能なボタン「MyButton」を使ってPropsの使い方を勉強する。

コンポーネントを作成する

まずは新しいReactプロジェクトを作成する。

作成したら「src」フォルダの配下に「components」フォルダを作り、その中に「MyButton.jsx」を作成する。

export const MyButton = () => {
  const buttonStyle = {
    background: 'orange',
    height: '50px',
    width: '150px',
    color: 'white',
  };

  return <button style={buttonStyle}>Click me!!</button>;
};

このファイルでは新しいコンポーネント「MyButton」を定義している。

ボタンはHTMLのbutton要素を好みのスタイルにカスタマイズしただけのシンプルなもの。

次にApp.jsにてMyButtonを使用してみよう。

一度コードをすべて削除して、以下の内容に書き換える。

import { MyButton } from './components/MyButton';
import './App.css';

function App() {
  return (
    <>
      <h2>Please click button.</h2>
      <MyButton></MyButton>
    </>
  );
}

export default App;

間違いが無ければ以下のようにボタンが表示されるはずだ。

Propsの渡し方

ここからはPropsを使っていこう。

ここではApp.jsからMyButton.jsxへ以下の2つのプロパティを渡す。

  • color – ボタンの色を指定する。”red”、”blue”など
  • text – ボタンに表示するテキスト。

App.jsのMyButtonを以下のように変更する。

<MyButton></MyButton>
⇓
<MyButton color="red" text="Don't click me!!"></MyButton>

プロパティを指定する場合は、プロパティ名の後にイコール「=」を付け値を指定する。

Propsの受け取り方

App.jsにて指定した2つのプロパティ「color」「text」をMyButton.jsxにて受け取ろう。

まずは1行目の丸カッコ内にpropsを記入してPropsをひとつのオブジェクトとして受け取る。
「props」の部分は任意の名前に変更してもいい。

export const MyButton = () => {
⇓
export const MyButton = (props) => {

3行目の背景色にcolorプロパティとして受け取った値を使用する。

background: 'orange',
⇓
background: props.color,

12行目のテキストにtextプロパティとして受け取った文字列を使用する。
ここではテキストを鍵カッコで囲んでいる点に気を付けてほしい。

return <button style={buttonStyle}>Click me!!</button>;
⇓
return <button style={buttonStyle}>{props.text}</button>;

プロパティの受け渡しが上手くいっていれば以下のようにボタンの色とテキストが変化するはずだ。

Propsの分割代入

Propsとして受け渡すプロパティの数が多くなってくると毎回props.textのように記述するのが煩わしくなってくる。

そんな時は受け取ったプロパティをまとめて変数に代入することができる。

MyButton.jsxをPropsの分割代入を使って書き直すと以下のようになる。

export const MyButton = (props) => {
 
 const { color, text } = props;

  const buttonStyle = {
    background: color,
    height: '50px',
    width: '150px',
    color: 'white',
  };

  return <button style={buttonStyle}>{text}</button>;
};

childrenの使い方

Propsにはchildrenというプロパティがデフォルトでセットされている。

これを使うことによりコードをシンプルに留めたまま、より複雑なコンポーネントの組み合わせを実装することができる。

childrenでテキストを渡す

まずはchildrenを使ってテキストを渡すパターンを見てみよう。

ここでは「MyText.jsx」という名付けたテキストを出力するだけのコンポーネントを例として使用する。

テキストを渡す側のコンポーネントではテキストをコンポーネントのタグで囲むかたちで指定する。

import { MyText } from './components/MyText';
import './App.css';

function App() {
  return (
    <>
      <MyText>Text from App.js!!</MyText>
    </>
  );
}

export default App;

テキストを受け取るコンポーネントの側では、{props.children}を使いテキストを受け取る。

export const MyText = (props) => {
  const textStyle = {
    background: 'yellow',
    padding: '10px',
  };

  return <div style={textStyle}>{props.children}</div>;
};

childrenで複数の要素を渡す

次にchildrenを使用して複数の要素を渡すパターンを先ほどの「MyText.jsx」を使い説明する。

この場合はコンポーネントタグの間にdivで囲んだ複数のコンポーネントを指定する。

import { MyText } from './components/MyText';
import './App.css';

function App() {
  return (
    <>
      <MyText>
        <div>
          <div>Text from </div>
          <h1>App.js!!</h1>
        </div>
      </MyText>
    </>
  );
}

export default App;

テキストを受け取るコンポーネントの側では、引き続き{props.children}を使い要素を受け取る。

「MyText.jsx」は変更をする必要が無い。

間違いが無ければ以下のように要素が表示されるはずだ。

MENU