Question

我正在尝试使固定数据表样本起作用：

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'],
    }
};

Answer 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。

react fixed-data-table的意外令牌错误

1 个答案: