React Propsを使用するサンプル

ReactでPropsを使用するサンプルです。

サンプル	ファイルの構成
	Propsで親から子へ値を渡す
	propsのchildrenを渡す

ファイルの構成

同じフォルダ内にApp.jsxとcomponent1.jsxとindex.jsとindex.htmlがあります。

プロジェクトフォルダ-srcフォルダ-App.jsxとcomponent1.jsxとindex.jsとindex.html

Propsで親から子へ値を渡す

jsxのファイル(App.jsx)

親コンポーネントにあたります。

import { Com1 } from "./component1";

export const App1 = () => {
  return (
    <>
      <p>テスト</p>
      <Com1 color2="blue" msg1="Props" msg2="テスト" />
    </>
  );
};

7行目は、3つの引数(color2,msg1,msg2)の値をcomponent1.jsxのcom1に渡し、その結果を表示します。

jsxのファイル(component1.jsx)

子コンポーネントにあたります。

export const Com1 = (props1) => {
  const { color2, msg1 } = props1;

  const color1 = {
    color: color2,
    backgroundColor: "yellow",
  };
  return (
    <p style={color1}>{msg1}の{props1.msg2}</p>
  );
};

1行目のprops1は、App.jsxの7行目のキーと値を受け取ります。
2行目は、分割代入です。5行目のcolor2や9行目のmsg1のように記述できます。
分割代入しない場合は、9行目のprops1.msg2と記述する必要があります。

jsのファイル(index.js)

import ReactDOM from "react-dom";
import { App1 } from "./App";

ReactDOM.render(<App1 />, document.getElementById("root"));

2行目は、App.jsxのApp1とひも付きます。

htmlのファイル(index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

9行目のdivの下にボタンが追加されます。

以下のように表示されます。

propsのchildrenを渡す

上記のファイルのうちapp.jsxとcomponent1.jsxを修正します。

jsxのファイル(App.jsx)

親コンポーネントにあたります。

import { Com1 } from "./component1";

export const App1 = () => {
  return (
    <>
      <p>テスト</p>
      <Com1 color2="blue" msg1="Props" msg2="テスト">
        <p>文字列1</p>
        <p>文字列2</p>
      </Com1>
    </>
  );
};

8,9行目は、childrenです。
キーはchildrenとして親コンポーネントに渡します。

jsxのファイル(component1.jsx)

子コンポーネントにあたります。

export const Com1 = (props1) => {
  const { color2, msg1 } = props1;

  const color1 = {
    color: color2,
    backgroundColor: "yellow",
  };
  return (
  <div style={color1}>{msg1}の{props1.msg2}{props1.children}</div>
  );
};

9行目は、親コンポーネントのchildrenを受け取り値を表示します。

画面は以下のように表示されます。