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>
)}
为什么条件不能嵌套?
答
您提供的示例在JSX标记中不是有效的JavaScript。
发生错误的第二个大括号被解释为Object,这就是为什么它不期待令牌!
;
如果你想保持这种联代码,你可以将其转换为使用这样的三元:
{showingVoterList && (
!!message
? <Panel header='Could not load voters' bsStyle='danger'>
<p>{message}</p>
</Panel>
: <p>Voter list goes here</p>
)}
+0
谢谢;非常有意义。我已经重构了我的代码,将嵌套的东西分解为其他函数。更干净。 –
参见[这里](https://github.com/facebook/react/issues/690) 。嵌套条件很快就会变得混乱。也许在'render'外面呢? – Li357