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)}とかでランダムなでかい値を放り込むといいかなと思います。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark