親タグでラップせずに兄弟要素をレンダリングするにはどうすればよいですか？

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

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>または同様のものでラップせずにレンダリングするにはどうすればよいですか？

これは現在の制限ですが、将来のある時点で修正される可能性があります（githubリポジトリにいくつかの未解決の問題があります）。

今のところ、配列を返す関数を使用できます（これは基本的にステートレスコンポーネントです）。

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

そして、それをコンポーネントで使用します。

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

更新

React 16では、レンダリングから配列を返すことができます。

別の更新

これで、最上位の配列を返すか、を使用できます <React.Fragment>。

配列では、動的に作成されたリストではなく、Reactが2つの要素が定数であることを認識しないため、各アイテムにキーを配置する必要があります。

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

を使用React.Fragmentすると、<div>または同様のものでラップするように動作しkeyます。子を動的に構築しない場合は、aは必要ありません。まず、配列をフラグメントでラップできます。

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

そして、配列とkeysを完全に削除できます。

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

これが古い投稿であることは知っていますが、私の答えは私のような初心者の助けになるかもしれません。

React 16.2では、フラグメントのサポートが改善されました。

これで、次のように返すことができます。

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

<></>またはでラップでき<Fragment></Fragment>ます。

一部の属性を渡したい場合は、執筆時点ではキーのみがサポートされて<Fragment />おり、短い構文なので使用する必要があります。<></>は属性を受け入れないます。

注：短い構文を使用する場合は、 使用していることを確認してくださいバベル7。

ソースリファレンス

ウーフー！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>
  ];
}

参照してください。ここでは、「断片と文字列新規戻り値の型をレンダリング」を説明する完全なブログ記事を。

親要素を持つことは、ほとんどの場合に役立ちます。たとえば、親classNameを持つことができます。子要素のスタイルやその他のいくつかのシナリオをターゲットにできるを持つことができます...

しかし、本当にそれをしたくない場合は、使用することができます React.Fragment

したがって、次のようなことを行うだけです。

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

バージョン16.2から<>、レンダリング関数で次のように見える、も使用する短縮バージョンがあります。

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

また、バージョン16.0以降を使用している場合は、以下のように、親ラッパーを必要としない要素の配列を返すことができます。

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

次のように角かっこで囲むことができます。

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

この例は私にとってうまく機能します：

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

この構文のようなものが私のために働いた

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

TypeScriptを使用する人にとって、正しい構文は次のとおりです。

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];