これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
JSX における props
属性の展開
propsオブジェクトがあらかじめ存在していて、JSXに渡したい場合...
をスプレッド演算子として使用する。
こうすることでpropsオブジェクトそのものを渡すことができる。
...
ってもはやなんかの記号にしか思えない。けどReactでは意味のあるものなのでこの辺誤解しないようにしておきたい。
チャットでやり取りするときに...を使うのちょっと考えようかな。
以下の例のApp1とApp2は全く等しいJSXの式になる。
function App1() {
return"
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector' };
return"
}
機能としてあるよっていう程度の理解でいいのかな。
コンポーネントが利用する適当なプロパティを取り出しつつ残りのすべてのプロパティに対してスプレッド演算子を利用することもできます。
という機能もあるらしい。
下の例はDOM内の<button>
にはkindが渡されていない状態。
残りのプロパティは...other
によって渡されている。
結果として柔軟性の高いものになる。
const Button = props => {
const { kind, ...other } = props; // ここ const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return ;
};
const App = () => {
return (
);
};
スプレッド演算子は便利ではありますが、コンポーネント内で利用しないプロパティを不用意に渡してしまったり、意味をなさない HTML 属性を DOM に渡してしまうようなことが容易にありえます。そのためこの構文は慎重に利用してください。
うーん使いどころが難しいそうだなという印象は間違ってなかったのかも。
今日はここまで。