React で登場する ... (3点リーダー)(ドット3つ)の使い方

● React で登場する ... (3点リーダー)(ドット3つ)(JSX Spread Attributes)の使い方

これは JSX Spread Attributes といって JSXでの記法です。 意味としては以下のコードと同じ意味合いとなります。

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child foo={props.foo} bar={props.bar} />
}

       ↓

const props = { foo: "foo", bar: "bar" };
render() {
  return <Child {...props} />
}

● なぜ JSX Spread Attributes を利用するのか?

子コンポーネントに渡したい値に変更があった場合に変更箇所が少なくて済みます。

props に hogee を追加する場合でも提示する箇所のみの変更でokです。

const props = { foo: "foo", bar: "bar", hoge:"hoge" };
render() {
  return <Child {...props} />
}
No.2067
10/12 09:03

edit