[解決済み] 兄弟要素を親タグで折り返さずにレンダリングするには？

質問

ほとんどの場合、親タグを持つことは問題ではありません。

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

しかし、兄弟要素を親なしで1つのレンダー関数に入れることに意味がある場合もあります。特にテーブルの場合、テーブルの行をラップして div .

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

2番目の例では、次のようなエラーが発生します。 Adjacent XJS elements must be wrapped in an enclosing tag while parsing file .

でラップすることなく、2 つの兄弟要素をレンダリングするにはどうしたらよいでしょうか。 <div> などで囲むことなく、2つの兄弟要素をレンダリングするにはどうしたらよいでしょうか？

どのように解決するのですか？

うっひょー。Reactチームがついにこの機能を追加しました。React v16.0の時点で、できるようになりました。

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

を参照してください。 新しいレンダーの戻り値タイプ: フラグメントと文字列" について説明しているブログ記事全体をご覧ください。 .