レンダリングのhtmlコンテンツの「カンマ演算子の左側」エラー

Question

簡単なプロセスです。

が、JSXコンパイラが何らかの理由でそれを許可いけない：ここで

は、原点は（私はdiv要素の外で私のテーブルをしたい）私はそれになりたい方法をレンダリングしていますか？

しかし、div要素の内部でテーブルを移動すると、 すべてが正常です。

だからdiffはテーブルの場所です。 なぜjsxはこのプロセスを妨害しますか？なぜ必要なの？ JSXで

Answer 1

、我々はあなたが複数の要素を返すようにしたい場合は、その後divまたは任意の他のラッパーコンポーネントによって、すべてのHTMLコードをラップし、複数の要素を返すことはできません、returnから一つだけhtml要素を返すことができます。

第1のケースでは、同じ要素が2つの要素（divと1つのtable）を返しています。あなたが1つにそれらをラッピングしているときdivすべてが適切に動作しています。

同じルールのため、コンポーネントのconditional renderingに従わなければなりません。

例：

正しい：

{ 1==1 /* some condition */ ? 
    <div> 
     True 
    </div> 
: 
    <div> 
     False 
    </div> 
} 

間違っ：

{ 1==1 /* some condition */ ? 
    <div> 
     True 1 
    </div> 
    <div> 
     True 2 
    </div> 
: 
    <div> 
     False 1 
    </div> 
    <div> 
     False 2 
    </div> 
} 

Answer 2

だけで簡単に更新。 React v16.2.0以上を使用している場合は、Fragmentsも使用できます。

return (
    <> 
     <div> 
      True 1 
     </div> 
     <div> 
      True 2 
     </div> 
    </> 
);