模块构建失败: SyntaxError:意外令牌(10:40) react固定数据表

Question

我们有一个带有此OurController项的react应用程序。OurController工作正常。添加示例中的以下代码会中断整个应用程序，浏览器中将不会呈现任何页面：

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

文件的开头是

var FixedDataTable = require('fixed-data-table');
var React = require('react');

const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.Cell;

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

class OurDataTable extends React.Component {

只要我把它注释掉，一切都很好，但我想尽可能紧跟教程。

错误如下所示

Module build failed: SyntaxError: Unexpected token (10:40)
const TextCell = ({rowIndex, data, col, {issue is here}...props}) => (

有一个箭头指向...props，看起来好像它不理解... (箭头指向第一个点)

​

​

该指南是针对fixed-data-table的以下代码片段

https://github.com/facebook/fixed-data-table/blob/master/examples/ObjectDataExample.js

我知道整个文件通常都很重要，但我保证在添加TextCell之前，代码会像预期的那样工作。我们有某些babel加载器，但我没有看到固定数据表要求更多：

var webpack = require('webpack');

module.exports = {
  //devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main.js'
  ],
  output: {
    path: require("path").resolve('./public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        }
      }
    ]
  }
};

express服务器的配置与此类似，并且正在运行(热重新加载等)

我们已经使用了ES6，并且工作方式类似于

class OurDataTable extends React.Component {

等

Answer 1

不确定，但我认为，问题出在扩散运算符...，您需要配置Babel才能使用transform-object-rest-spread plugin。

请访问以下链接进行安装：https://babeljs.io/docs/plugins/transform-object-rest-spread/