jsx snytax error using && operator

Question

上記のjsxを使用してsnytaxエラーが発生しましたが、なぜこれは動作しません。

Answer 1

私が何をしたいことは、最初のエラーが原因show && <div>...を包む中括弧のある

render() { 
    const { show } = this.props 

    return (
    <div> 
    { 
     show && <div className="main">what's wrong? </div> 
     } 
    </div> 
) 
} 

Answer 2

だと思います。

Unexpected token, expected ,

中括弧複数のものを表しており、それらが内部に使用されている文脈に依存します。 returnキーワードの後に​​かっこに関係なく、Object literal/initializerと解釈されています。パーサーは、showがキーの後に閉じ括弧、カンマ、または:と値のいずれかが続き、代わりに&&が見つかると予想しています。

return ({ 
    key1, 
    key2: value2 
}); 

中括弧は、要素内に入るまで、JSXのインラインコード式を表すことはありません。たとえば：

return (
    <div>{ 
     show && <div className="main">what's wrong?</main> 
    }</div> 
); 

代わりにオブジェクトのコード式としてそれらを区別するためのラッピング要素がなければ、それらを削除する必要があります。

return (
    show && <div className="main">what's wrong?</main> 
); 

---

あなたが解決したら、第二そのエラーが発生します。

Expected corresponding JSX closing tag for <div>

<div>が現在</main>と一致していないためです。後者を</div>に変更すると解決されます。

return (
    show && <div className="main">what's wrong?</div> 
); 

---

あなたはまた、「グッドオールif使用することができます。

if (show) return <div className="main">what's wrong?</div>;