React, Babel - Условия вложения в блоке JSX не работают

Question

У меня есть то, что я надеюсь, это довольно обычная настройка для кодирования. Реагируйте с синтаксисом ES6, а именно, я использую Babel для пересылки и Webpack для сборки кода.

Это, как я Бабель настроен (извлеченный из package.json)

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

При использовании условно рендеринга контента в блоке JSX с помощью React, если я делаю это

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

я получаю это ошибка:

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

Приведенный ниже пример недействителен JavaScript внутри тега JSX.

Вторая фигурная скобка, где происходит ошибка, интерпретируется как объект, поэтому он не ожидает токена !;

Если вы хотите сохранить этот код рядный вы можете преобразовать его в использовании трехкомпонентной так:

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