React, Babel - Nesting-Bedingungen innerhalb eines JSX-Blocks funktioniert nicht

Question

Ich habe, was ich hoffe, ist ein ziemlich normales Setup für die Codierung reagieren mit ES6-Syntax, nämlich ich benutze Babel zu transpile und Webpack, um den Code zu montieren.

Dies ist, wie ich Babel konfiguriert (aus package.json extrahiert)

"babel": { 
    "presets": [ 
    ["es2015", {"loose": true}], 
    "stage-0", 
    "react" 
    ], 
    "plugins": [ 
    "react-hot-loader/babel" 
    ] 
}, 

Wenn bedingt Rendering-Gehalt innerhalb eines JSX Block Reagieren verwenden, wenn ich dies tun

{showingVoterList && (
    {!!message && (
    <Panel header='Could not load voters' bsStyle='danger'> 
     <p>{message}</p> 
    </Panel> 
)} 
    {!message && (
    <p>Voter list goes here</p> 
)} 
)} 

ich das bekommen Fehler:

Module build failed: SyntaxError: Unexpected token (53:11) 

    51 | 
    52 |   {showingVoterList && (
> 53 |   {!!message && (
    |   ^
    54 |    <Panel header='Could not load voters' bsStyle='danger'> 
    55 |     <p>{message}</p> 
    56 |    </Panel> 

aber wenn ich das tue, es funktioniert gut

{showingVoterList && !!message && (
    <Panel header='Could not load voters' bsStyle='danger'> 
     <p>{message}</p> 
    </Panel> 
)} 
{showingVoterList && !message && (
    <p>Voter list goes here</p> 
)} 

Warum können die Bedingungen nicht verschachtelt werden?

Answer 1

Das von Ihnen angegebene Beispiel ist kein gültiges JavaScript innerhalb eines JSX-Tags.

Die zweite geschweifte Klammer, in der der Fehler auftritt, wird als Objekt interpretiert, weshalb das Token nicht erwartet wird !;

Wenn Sie diesen Code inline halten wollten Sie es konvertieren könnte ein ternäres wie folgt zu verwenden:

{showingVoterList && (
    !!message 
    ? <Panel header='Could not load voters' bsStyle='danger'> 
     <p>{message}</p> 
     </Panel> 
    : <p>Voter list goes here</p> 
)}