万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    資産運用ブログ アセマネ
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin:KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

    React renderで2つ以上のコンポーネントをトップ階層に書きたい

    簡単に書くためdivを例に。

    これは余裕で書ける。

      render() {
        return (
          <div />
        );
      }

    しかし、以下のように2つ書いたら当然のように怒られる。

      render() {
        return (
          <div />
          <div />
        );
      }
    [tslint] unused expression, expected an assignment or function call (no-unused-expression)
    [ts] コンマ演算子の左側が使用されていないため、副作用はありません。
    (property) JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>

    だからと言って、上の階層にdivで囲ってやればエラーにはならないが、本来の目的とは異なる。 そもそも、一つ間に挟まるのはいただけない・・。

      render() {
        return (
          <div />
            <div />
            <div />
          <div />
        );
      }

    解決策。 javascript - Is there a way to render multiple React components in the React.render() function? - Stack Overflow

    配列にする、 keyは必須。さもないと警告。

      render() {
        return (
          [
            <div key="one" />,
            <div key="two" />
          ]
        );
      }