【React】TypeScript！「…」を使え！オブジェクトのプロパティを展開して引数を渡したい（TypeScript）

投稿者 投稿日:

Reactで引数の頭に「…」をつけると、その引数がオブジェクトの展開 (Object Spread) を意味します

新しいオブジェクトを作成する際に、既存のオブジェクトのプロパティを展開してコピーするために使用されます

具体的には、以下のような使い方があります

例えば、あるコンポーネントで他のコンポーネントから受け取ったプロパティをそのまま別のコンポーネントに渡す場合、以下のように展開演算子（スプレッド演算子）を使うことがあります

import React from 'react';

interface Person {
  name: string;
  age: number;
}

interface ChildProps {
  name: string;
  age: number;
}

const ChildComponent: React.FC<ChildProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

const ParentComponent: React.FC = () => {
  const person: Person = { name: "Alice", age: 30 };

  return (
    <div>
      {/* personオブジェクトのプロパティをChildComponentに展開して渡す */}
      <ChildComponent {...person} />
    </div>
  );
};

export default ParentComponent;

この例では、PersonとChildPropsというインターフェースを定義して、それぞれnameとageのプロパティを持つオブジェクトを表しています

ChildComponentではChildPropsを使ってプロパティを受け取ります
ParentComponentではPersonオブジェクトを定義し、そのプロパティをChildComponentに展開して渡しています

是非参考ください！

ではっ

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon