【React】値の受け渡し Propsとchildren

はじめに

Reactでは、値の受け渡しにPropsがあります。そして、propsの特別な受け渡し方法としてchildrenがあります。Propsとchildrenについてまとめていきます。

Props

下記のコードでは、Propsを使って、ColoredMessageコンポーネントに色とメッセージを受け渡しをしています。

App.jsx

import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {

  return (
    <>
      <ColoredMessage color="blue" message="おげんきですか?" />
      <ColoredMessage color="pink" message="元気です！" />
    </>
  );
};

ColoredMessage.jsx

export const ColoredMessage = (props) => {
  const contentStyle = {
    color: props.color,
    fontSize: "10px",
  };

  return <p style={contentStyle}>{props.message}</p>;
};

children

下記のコードでは、<ColoredMessage></ColoredMessage>で囲んだコードをColoredMessageコンポーネントで、props.childrenで受け取ってます。

App.jsx

import { ColoredMessage } from "./components/ColoredMessage";

export const App = () => {
  return (
    <>
      <ColoredMessage color="blue">おげんきですか?</ColoredMessage>
      <ColoredMessage color="pink">元気です！</ColoredMessage>
    </>
  );
};

ColoredMessage.jsx

export const ColoredMessage = (props) => {
  const contentStyle = {
    color: props.color,
    fontSize: "20px",
  };

  return <p style={contentStyle}>{props.children}</p>;
};

分割代入を使うと短く書ける

ColoredMessage.jsx

export const ColoredMessage = (props) => {
  const { color, children } = props; //propsの分割代入
  const contentStyle = {
    color, //propsを省略できる。そして、color:colorの省略記法が使える
    fontSize: "10px",
  };

  return <p style={contentStyle}>{children}</p>; //propsを省略できる
};