Main.jsx 中的错误 - Webpack

【问题标题】：ERROR in ./src/components/Main.jsx - Webpack./src/components/Main.jsx 中的错误 - Webpack
【发布时间】：2016-07-20 10:57:33
【问题描述】：

有人可以帮帮我吗？当我尝试使用 webpack 时，它显示了这个错误：

Module build failed: SyntaxError: /path/to/my/folder/src/components/Main.jsx: Unexpected token (170:13)
  168 |ReactDOM.render(
  169 |<TodoApp
> 170 |    todos={...store.getState()}
      |              ^
  171 |     />,
  172 |     document.getElementById('app')
  173 |   );

这是我的 webpack.config.js 的配置：

  module : {
    loaders : [
      {
        test : /\.jsx$/,
        exclude : /node_modules/,
        loader : 'babel',
        query : {
          presets : ['react', 'es2015', 'stage-2']
        }
      }
    ]
  }

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript reactjs ecmascript-6 webpack babeljs

【解决方案1】：

在 JSX 中，{} 是一个 javascript 表达式。由于您尝试传递 对象文字，因此您需要使用双括号：

todos={{...store.getState()}}

JSX Expression Docs

正如大卫在下面指出的那样，如果您的意图只是将状态分配给todos，而不添加您自己的任何属性，这就足够了：

todos={store.getState()}

【讨论】：

todos={{...store.getState()}} 不是和todos={store.getState()} 一样吗？如果您希望状态树的顶级道具成为组件的道具，您也可以使用<TodoApp {...store.getState()} />。