propsの分割代入

React入門 / 全 6 枚

props. をくり返さない

props が増えるほど props. の繰り返しで読みにくくなり、打ち間違いも増えます。第2章で復習した分割代入を、そのまま引数のところで使います。

propsが3つに増えると

function Profile(props) {
  return (
    <section className="profile">
      <p>{props.name}</p>
      <p>{props.title}</p>
      <p>{props.bio}</p>
    </section>
  );
}

分割代入で受け取る

function Profile({ name, title, bio }) {
  return (
    <section className="profile">
      <p>{name}</p>
      <p>{title}</p>
      <p>{bio}</p>
    </section>
  );
}

1 / 6

← → キーでも送れます

このスライドが付いているレッスンを開く