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

Posted 2023-02-21

【中文标题】反应固定数据表的意外令牌错误

【英文标题】：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

【参考方案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”。谢谢！