在react中实现固定数据表时出现意外的令牌错误

时间:2015-06-19 13:52:09

标签: reactjs

当我试图实现固定数据表获取

./index.jsx

中的错误

21:3错误意外的令牌< .....

如何解决此问题?

以下是文件列表

的index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FixedDataTable demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="fixed-data-table.css">
</head>
<body>
    <div id="fixedDataTable"></div>
    <script src="bundle.js"></script>
</body>
</html>

index.jsx

    /* @flow */
var React = require('react');
var FixedDataTable = require('fixed-data-table');

var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;


var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b3', 'c2'],
  ['a3', 'b3', 'c3']
];

function rowGetter(rowIndex) {
  return rows[rowIndex];
}

React.render(

  <Table
    rowHeight={50}
    rowGetter={rowGetter}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      label="Col 1"
      width={3000}
      dataKey={0}
    />
    <Column
      label="Col 2"
      width={2000}
      dataKey={1}
    />
  </Table>,
  document.getElementById('fixedDataTable')
);

的package.json

    {
  "name": "fixed-data-table-demo",
  "version": "1.0.0",
  "description": "A demo for FixedDataTable (http://facebook.github.io/fixed-data-table/)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ludovicofischer/react-book"
  },
  "keywords": [
    "react"
  ],
  "author": "Ludovico Fischer",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ludovicofischer/react-book/issues"
  },
  "homepage": "https://github.com/ludovicofischer/react-book",
  "dependencies": {
    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "fixed-data-table": "^0.1.2",
    "node-libs-browser": "^0.5.2",
    "react": "^0.13.1",
    "react-hot-loader": "^1.2.7",
    "webpack": "^1.9.11"
  },
  "devDependencies": {
    "eslint": "^0.17.1",
    "eslint-loader": "^0.7.0",
    "eslint-plugin-react": "^1.5.0",
    "jsx-loader": "^0.12.2"
  }
}

webpack.config.js

    module.exports = {
    entry: './index.jsx',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /.jsx$/, loader: 'babel-loader'}
        ],
        preLoaders: [
            {
                test: [/\.jsx$/, /.js$/],
                exclude: /node_modules/,
                loader: 'eslint-loader'
            },
        ]
    }
};

如何解决此问题?

1 个答案:

答案 0 :(得分:1)

您的加载程序的正则表达式看起来是正确的,但我总是看到.被转义,因此请尝试将loaders更改为以下内容:

{test: /\.jsx$/, loader: 'babel-loader'}