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

Question

我希望这是一个相当正常的设置，用于使用 ES6 语法对 React 进行编码，即我正在使用 Babel 进行转译，并使用 Webpack 来 assemble 代码。

这就是我配置 Babel 的方式（摘自 package.json）

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

当使用 React 在 JSX 块中有条件地呈现内容时，如果我这样做

{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

您提供的示例在 JSX 标记内无效JavaScript。

发生错误的第二个大括号被解释为对象，这就是为什么它不需要令牌 !;

如果你想让这段代码保持内联，你可以将它转换为使用像这样的三元：

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

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

React, Babel — Nesting conditions within a JSX block doesn't work

conditional

reactjs

webpack

babeljs