React使用Antd里面组件Table报错怎么解决?

新手上路,请多包涵

使用Antd的Table组件会报错误

  1. index.js
import React from 'react';
import './role.less'
// import 'antd/dist/antd.css';
import { Table } from 'antd';
const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];
  
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  }];
export default class Refuel extends React.Component {
    render() {
        return (
            <Table dataSource={dataSource} columns={columns} />
        )
    }
}
  1. package.json
{
  "name": "react1706",
  "version": "1.0.0",
  "description": "react demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --hot --history-api-fallback",
    "clean": "rimraf dist",
    "build": "npm run clean  && webpack --config webpack.pro.config.js",
    "rebuild": "webpack --config webpack.pro.config.js"
  },
  "author": "zuokeliang",
  "license": "ISC",
  "dependencies": {
    "antd": "^2.13.10",
    "axios": "^0.17.0",
    "flux": "^3.1.3",
    "history": "^4.7.2",
    "layui-src": "^2.2.2",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "react-router": "^3.0.1",
    "react-swipe": "^5.1.0",
    "react-transition-group": "^2.2.1",
    "redux": "^3.7.2",
    "redux-deferred": "^0.1.0",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.2.0",
    "velocity": "^0.7.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.6.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "cssgrace": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "open-browser-webpack-plugin": "^0.0.5",
    "postcss-loader": "^2.0.8",
    "postcss-px2rem": "^0.3.0",
    "react-hot-loader": "^3.1.2",
    "react-transition-group": "^2.2.1",
    "rimraf": "^2.6.2",
    "source-list-map": "^2.0.0",
    "source-map": "^0.6.1",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}
  1. webpack.config.js

var path = require("path");
var webpack = require("webpack");   //main.js  出口文件
var HtmlWebpackPlugin  = require("html-webpack-plugin");  // 曹组 html
var OpenBrowserWebpackPlguin  =  require("open-browser-webpack-plugin"); // 打开浏览器 
var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");  // 抽离样式 css文件
module.exports = {
    entry:["./src/scripts/index.js"],
    devtool:"source-map",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"js/[name].[hash:8].js",   //以文件内容 的  MD5 加密 生成 hash 名称的scripts 来防止缓存
        publicPath:""   // 生成 html 自动引用路径 publicPath 
    },
    module:{   // 模块声明加载 方式 js / css / img
        rules:[
            {
                test:/\.js[x]?$/,
                use:["babel-loader"],
                exclude:[path.resolve(__dirname,'node_modules')]
            },
            {
                test:/\.(css|less)$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:"style-loader" ,   
                    use:["css-loader",{    // css-loader打包模块
                        loader:"postcss-loader",    
                        options:{
                            plugins:function(){
                                return [
                                    require("cssgrace"), 
                                    // require("postcss-px2rem")({remUnit:75}),
                                    require("autoprefixer")()
                                ]
                            }
                        }
                    },'less-loader']
                })
            },
            {
                test:/\.(gif|jpg|png|woff|woff2|svg|eot|ttf)\??.*$/,
                use:["url-loader?limit=8192&name=font/[hash:8].[name].[ext]"]
            }
        ]
    },


    // 插件
    plugins:[
        // new OpenBrowserWebpackPlguin({url:"http://localhost:3000"}),

        new HtmlWebpackPlugin({
            template:"./src/index.html",
            inject:true         // 自动注入   js/css
        }),

        new ExtractTextWebpackPlugin({
            filename:"app.[hash].css",
            allChunks:true,
            disable:false
        }),

        new webpack.HotModuleReplacementPlugin(),

    ],
}

报错信息

阅读 3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题