最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。
多分他にも色んな渡し方があると思うので随時更新していきます。
前提として親コンポーネント(App.tsx)から子コンポーネント(Home.tsx)へ
const user = {
name: "tanaka",
age: 25,
};
このuserのデータを渡すという前提で考えます。
・(1)userの情報を分けて渡す
親コンポーネント(App.tsx)
// userを用意
const user: Props = {
name: "Tanaka",
age: 25,
};
// userの型を用意。exportさせておく
export type Props = {
name: string;
age: number;
};
/*
子のコンポーネントへuser.nameとuser.ageをそれぞれ
"name""age"として分けて渡す
*/
export default function App() {
return (
<>
<Home name={user.name} age={user.age} />
</>
)
}
子コンポーネント(Home.tsx)
// 型をimportしておく
import { Props } from "../App";
export const Home = ({ name, age }: Props) => {
return (
<>
<p>{name}</p>
<p>{age}</p>
</>
)
};
これで画面上には
Tanakaと25が表示されます。
個人的にはこの形が好みです。
・(2)userの情報を一括で渡す
続いてこちらは親のコンポーネントから一気にuserオブジェクトを渡す方法です。
親コンポーネント(App.tsx)
// userを用意
const user: Props = {
name: "Tanaka",
age: 25,
};
// userの型を用意。exportさせておく
export type Props = {
name: string;
age: number;
};
/*
user={user}で一気に渡す
*/
export default function App() {
return (
<>
<Home user={user} />
</>
)
}
子コンポーネント(Home.tsx)
import { Props } from "../App";
/*
オブジェクトがネストされて渡ってきているため
さらに型を用意します。
*/
type HomeProps = {
user: Props;
};
export const Home = ({ user }: HomeProps) => {
// user.name user.ageとして使用可能
return (
<>
<p>{user.name}</p>
<p>{user.age}</p>
</>
);
};
新たに型を用意しないといけないのが手間ですね。
・(3)userの情報の中身を一括で渡す
(2)では、
user={user}
の形で一気渡していたため、ネストされたオブジェクトになっていました。
これをクリアすべくオブジェクトの中身を一気に渡すパターンも紹介します。
親コンポーネント(App.tsx)
// userを用意
const user: Props = {
name: "Tanaka",
age: 25,
};
// userの型を用意。exportさせておく
export type Props = {
name: string;
age: number;
};
/*
{...user}でプロパティのみを渡す
*/
export default function App() {
return (
<>
<Home {...user} />
</>
)
}
子コンポーネント(Home.tsx)
import { Props } from "../App";
export const Home = ({ name, age }: Props) => {
return (
<>
<p>{name}</p>
<p>{age}</p>
</>
);
};
こっちの方が(2)よりもシンプルに記述できる。