React，Babel - JSX块中的嵌套条件不起作用

我希望这是一个相当普通的编码React与ES6语法的设置，即我使用Babel来编译和Webpack来组装代码。React，Babel - JSX块中的嵌套条件不起作用

我这是怎么了巴贝尔配置（从提取的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> 
)}

为什么条件不能嵌套？

来源

2016-11-22 Dave Sag

参见[这里]（https://github.com/facebook/react/issues/690）。嵌套条件很快就会变得混乱。也许在'render'外面呢？ – Li357

您提供的示例在JSX标记中不是有效的JavaScript。

发生错误的第二个大括号被解释为Object，这就是为什么它不期待令牌!;

如果你想保持这种联代码，你可以将其转换为使用这样的三元：

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

来源

2016-11-22 00:41:16

谢谢;非常有意义。我已经重构了我的代码，将嵌套的东西分解为其他函数。更干净。 –

React，Babel - JSX块中的嵌套条件不起作用

回答

相关问题