反应固定数据表的意外令牌错误答案

【问题标题】：Unexpected token error for react fixed-data-table反应固定数据表的意外令牌错误
【发布时间】：2016-03-28 07:35:17
【问题描述】：

我正在尝试让固定数据表示例工作：

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';

// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
// .... and more
];

// Render your table
module.exports = React.createClass({
  render:  function() {
    return (
      <Table
        rowHeight={50}
        rowsCount={rows.length}
        width={200}
        height={200}
        headerHeight={50}>

      {/*if I have just this column, the page will render*/}
      <Column
        header={<Cell>Col 1</Cell>}
        cell={<Cell>Column 1 static content</Cell>}
        width={500}
        />

      {/*This column causes the error*/}
      <Column
        header={<Cell>Col 3</Cell>}
        cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
        )}
        width={500}
      />
      </Table>
    );
  }
});

但是当我运行 webpack 时，它一直抛出这个错误：

Module build failed: SyntaxError: C:/xxxx/Sample.jsx: Unexpected token (33:24)
  31 |     <Column
  32 |       header={<Cell>Col 3</Cell>}
> 33 |       cell={({rowIndex, ...props}) => (
     |                         ^
  34 |         <Cell {...props}>
  35 |           Data for column 3: {rows[rowIndex][2]}
  36 |         </Cell>

我认为 webpack 将 {rowIndex, ...props} 视为格式不正确的对象，但我不确定下一步该去哪里。

这是我的 webpack.config：

var path = require('path');


module.exports = {
    context: path.join(__dirname, 'server/components'),
    entry: [
        'webpack-dev-server/client?http://localhost:8090', 
        'webpack/hot/only-dev-server', 
        "./entry.jsx"
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader'],
            }
        ]
    },
    output: {
        path: __dirname + '/server/public/js/build',
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/js/build/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
    }
};

【问题讨论】：

你用什么进行 JSX 转译？
有一次我遇到了同样的问题，这是另一种使固定数据表工作的方法：4dev.tech/2015/12/…
固定数据表现已停产。这就是我们发布 React 端口的原因 - reactdatagrid.com

标签： reactjs fixed-data-table

【解决方案1】：

假设您安装并启用了正确的转换（对于 Babel 6，您需要 babel-plugin-transform-object-rest-spread），您可能会遇到 bug #T2631：

export default ( { title, ...other } ) => {
    // do something
};

输出失败

SyntaxError: test-fn-spread.js: Binding rvalue (1:26)
> 1 | export default ( { title, ...other } ) => {
    |                           ^
  2 |     // do something
  3 | };

6.1.2 中的错误was fixed。

【讨论】：

我没有所有正确的转换。我需要添加“babel-plugin-transform-object-rest-spread”。谢谢！