propsの分割代入
props. を毎回書かない
props が3つ4つと増えると、props.name、props.title、props.bio と同じ語をくり返すことになります。読みにくいうえ、props.nmae のような打ち間違いも増えます。
function Profile(props) {
return (
<section className="profile">
<p>{props.name}</p>
<p>{props.title}</p>
<p>{props.bio}</p>
</section>
);
}第2章で復習した 分割代入 を、そのまま引数のところで使えます。
function Profile({ name, title, bio }) {
return (
<section className="profile">
<p>{name}</p>
<p>{title}</p>
<p>{bio}</p>
</section>
);
}やっていることは前と同じです。届いた1つのオブジェクトを、その場で name と title と bio に分けて受け取っているだけです。React のコードではこちらの書き方が主流なので、慣れておくと他人のコードも読めるようになります。
引数の波かっこはオブジェクトではない
function Profile({ name }) の波かっこを見て「オブジェクトを渡している」と読んでしまう人が多いところです。これは受け取り方の指定であって、渡すものの形ではありません。渡す側はこれまでどおり属性で書きます。
<Profile name="あおい" title="Web エンジニア" />受け取っていない props は使えない
分割代入は「書いたものだけ」取り出します。渡してあっても、引数に名前を書き忘れたら中では使えません。
function Profile({ name }) {
return <p>{name} / {title}</p>; // title は取り出していないのでエラー
}画面が真っ白になり、title is not defined というエラーが出ます。props を1つ足すときは、渡す側と受け取る側の両方を直す、と覚えてください。片方だけ直して動かない、が一番よくある詰まり方です。
既定値も書ける
渡されなかったときの値も、分割代入と同じ書き方で決められます。
function Profile({ name, title = "肩書き未設定" }) {title を渡さずに <Profile name="あおい" /> と書くと、画面には 肩書き未設定 と出ます。渡されないと undefined になって何も表示されない、という空白の事故を防げます。
演習
Profile を分割代入で受け取る形に書きかえ、自己紹介文の props を1つ足します。