React，Babel - JSX塊中的嵌套條件不起作用

Question

我希望這是一個相當普通的編碼React與ES6語法的設置，即我使用Babel來編譯和Webpack來組裝代碼。

我這是怎麼了巴貝爾配置（從提取的package.json）

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

有條件時使用反應過來，如果我這樣做

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

我得到這個渲染JSX塊中的內容錯誤：

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> 

但如果我這樣做，它工作正常

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

爲什麼條件不能嵌套？

Answer 1

您提供的示例在JSX標記中不是有效的JavaScript。

發生錯誤的第二個大括號被解釋爲Object，這就是爲什麼它不期待令牌!;

如果你想保持這種聯代碼，你可以將其轉換爲使用這樣的三元：

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