🍡

JSXはspread演算子で<Foo a={a} b={b}>を<Foo {...{a, b}}>で書ける

1 min read 2

前説

通常、JSXでパラメータを渡すならこうなる

<Foo a={a} b={b} />

ただ、これらはパラメータが増えたり、それを引き回すことになるとそこそこ面倒になる

<Foo a={a} b={b} c={c} d={d} e={e} />

spread演算子を使う

まずこれらは一つの値にまとめることでspread演算子として渡す事が出来る。親から子にスルーするならばこんな具合で良い

const Baz = (props) => {
  return <Foo {...props}>
}

一度展開して他にも使うならこんな具合か

const Baz = (props) => {
  const {a, b, c} = props
  return <>
    <div>{a}</div>
    <Foo {...props} />
    <Bar b={b} />
  </>
}

またはこんな具合だろう

const Baz = ({a, b, c}) => {
  const props = {a, b, c} 
  return <>
    <div>{a}</div>
    <Foo {...props} />
    <Bar b={b} />
  </>
}

ただ若干無駄な戻しをしていたり、無駄な値を渡してしまうケースもあるだろう

本題

spread演算子とShorthand property namesを組み合わせる。

上記で

const props = {a, b, c} 

と記載しているが、これはShorthand property namesと呼ばれるものになる。

これをspreadと組み合わせて{...{a, b, c}}と書くことで下記のように記載できる

const Baz = ({a, b, c}) => {
  return <>
    <div>{a}</div>
    <Foo {...{a, b, c}} />
    <Bar b={b} />
  </>
}

うれしさ1: brace省略が出来る

この書き方だとbrace省略が出来る。うれしい

const Baz = ({a, b, c}) => (<>
    <div>{a}</div>
    <Foo {...{a, b, c}} />
    <Bar b={b} />
  </>
)

うれしさ2: 無駄なプロパティを渡さなくて良い

props = { a, b, c }のようにまとめていると、なんとなく必要のないパラメータまで渡したりして不便な事があった。この書き方だとうまくその問題を除去出来る

const Baz = ({a, b, c}) => (<>
    <NeedAandB {...{a, b}} />
    <NeedBandC {...{b, c}} />
  </>
)

うれしさ3: 名前変更も楽にできる

一部propertyの名前を変える必要があっても対応しやすい

const Baz = ({a, b, c}) => (<>
    <NeedAandB {...{apple: a, banana: b, c}} />
    <NeedBandC {...{b, c}} />
  </>
)

Discussion

この方法、余計なプロパティを渡せてしまうので不意の事故につながりそうで若干怖いなと思ってます(おそらくそんなに問題にならないと思いますが)

その点はspread演算子全般に共通する話だと思いますが、外部ライブラリ等では使わないようにするなどの心遣いをしても良いかもしれませんね。

ログインするとコメントできます