【React・TypeScript】実は、Props引数はスプレッド構文を渡すことができる

はじめに

以下本を読んだときに、Propsについて学びがあったので、TypeScriptで記事にしました。

https://www.oreilly.co.jp/books/9784873119380/

Props引数をスプレッド構文で受け取る

例えば、以下コンポーネントがあるとする

type Props = { message: string, no: number };

const ChildrenText = ({ message, no }: Props) => {
  return (
    <>
      <div>Message:{message}</div>
      <div>No:{no}</div>
    </>
  );
};

親コンポーネントがChildrenText にProps引数を設定する場合、以下のようにスプレッド構文で渡すことができる

const Parent = () => {
  const props = {
    message: 'あああああ',
    no: 114514
  };

  return (
    <div className="App" >
		{/* スプレッド構文でPropsを渡す */}      
		<ChildrenText {...props} />
    </div >
  );
}