React v16でコンポーネントを配列として扱ってみる
今までのReactは、以下のような並列した複数のコンポーネントの扱いがちょっと面倒でした。 <div>Item1</div> <div>Item2</div> 1つのコンポ […]
広告ここから
広告ここまで
目次
今までのReactは、以下のような並列した複数のコンポーネントの扱いがちょっと面倒でした。
<div>Item1</div>
<div>Item2</div>
1つのコンポーネントに入れるにはdivでさらに囲う必要があり、どんどんネストが深くなるという問題がありました。
const Sample = () => (
<div>
<div>Item1</div>
<div>Item2</div>
</div>
);
React v16からはどうなるか
配列で返すことができるようになるので、不必要なネストを減らすことができます。
const Sample = () => {
const component = [
<div>Item1</div>,
<div>Item2</div>
];
return component;
};
実際に使用する際は、「配列にするならkeyをつけろ」というWarningを出されるので以下のようにしましょう。
const Sample = () => {
const component = [
<div key="123">Item1</div>,
<div key="124">Item2</div>
];
return component;
};
試してないですが、keyの値が重複すると多分事故ると思います。
怖い方は{Math.random().toString(16)}
とかでランダムなでかい値を放り込むといいかなと思います。