2

我遇到了 React-Table 库的问题，其中 Google Chrome 在“prop-Types.js”（import PropTypes from 'prop-types'）的第一行显示了 Uncaught SyntaxError: Unexpected Identifier。

我正在运行以下版本的相关软件包：React：16.2.0 React-Table：6.8.0 Prop-Types：15.6.1

这是我调用的文件中的代码react-table：

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";

import { Tips } from "./Utils";
import "react-table/react-table.css";

class SmartGridTable extends React.Component {
  constructor() {
    super();
    this.renderEditable = this.renderEditable.bind(this);
  }

  renderEditable(header, cellInfo){
    return(
      <input key={cellInfo.original.PartId + header + cellInfo.value} defaultValue={cellInfo.value} onBlur={(e) => {this.props.updateRecord(e, cellInfo.original)}} data-field={header}/>
    )
  }

  render() {
    const { records, columns } = this.props;
    let tableColumns = columns.map((col) => {
      return {
        Header: col.DisplayName,
        accessor: col.Name,
        Cell: this.renderEditable.bind(null, col.Name)
      }
    })
    return (
      <div>
        <ReactTable
          data={records}
          columns={tableColumns}
          defaultPageSize={25}
          className="-striped -highlight"
        />
        <br />
        <Tips />
    </div>
    );
  }
}

export default SmartGridTable;

这是 react-table 库本身的 propTypes.js 文件（Chrome 在第一行表示语法问题）：

import PropTypes from 'prop-types'

export default {
  // General
  data: PropTypes.array,
  loading: PropTypes.bool,
  showPagination: PropTypes.bool,
  showPaginationTop: PropTypes.bool,
  showPaginationBottom: PropTypes.bool,
  showPageSizeOptions: PropTypes.bool,
  pageSizeOptions: PropTypes.array,
  defaultPageSize: PropTypes.number,
  showPageJump: PropTypes.bool,
  collapseOnSortingChange: PropTypes.bool,
  collapseOnPageChange: PropTypes.bool,
  collapseOnDataChange: PropTypes.bool,
  freezeWhenExpanded: PropTypes.bool,
  sortable: PropTypes.bool,
  resizable: PropTypes.bool,
  filterable: PropTypes.bool,
  defaultSortDesc: PropTypes.bool,
  defaultSorted: PropTypes.array,
  defaultFiltered: PropTypes.array,
  defaultResized: PropTypes.array,
  defaultExpanded: PropTypes.object,
  defaultFilterMethod: PropTypes.func,
  defaultSortMethod: PropTypes.func,

  // Controlled State Callbacks
  onPageChange: PropTypes.func,
  onPageSizeChange: PropTypes.func,
  onSortedChange: PropTypes.func,
  onFilteredChange: PropTypes.func,
  onResizedChange: PropTypes.func,
  onExpandedChange: PropTypes.func,

  // Pivoting
  pivotBy: PropTypes.array,

  // Key Constants
  pivotValKey: PropTypes.string,
  pivotIDKey: PropTypes.string,
  subRowsKey: PropTypes.string,
  aggregatedKey: PropTypes.string,
  nestingLevelKey: PropTypes.string,
  originalKey: PropTypes.string,
  indexKey: PropTypes.string,
  groupedByPivotKey: PropTypes.string,

  // Server-side Callbacks
  onFetchData: PropTypes.func,

  // Classes
  className: PropTypes.string,
  style: PropTypes.object,

  // Component decorators
  getProps: PropTypes.func,
  getTableProps: PropTypes.func,
  getTheadGroupProps: PropTypes.func,
  getTheadGroupTrProps: PropTypes.func,
  getTheadGroupThProps: PropTypes.func,
  getTheadProps: PropTypes.func,
  getTheadTrProps: PropTypes.func,
  getTheadThProps: PropTypes.func,
  getTheadFilterProps: PropTypes.func,
  getTheadFilterTrProps: PropTypes.func,
  getTheadFilterThProps: PropTypes.func,
  getTbodyProps: PropTypes.func,
  getTrGroupProps: PropTypes.func,
  getTrProps: PropTypes.func,
  getTdProps: PropTypes.func,
  getTfootProps: PropTypes.func,
  getTfootTrProps: PropTypes.func,
  getTfootTdProps: PropTypes.func,
  getPaginationProps: PropTypes.func,
  getLoadingProps: PropTypes.func,
  getNoDataProps: PropTypes.func,
  getResizerProps: PropTypes.func,

  // Global Column Defaults
  columns: PropTypes.arrayOf(
    PropTypes.shape({
      // Renderers
      Cell: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Header: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Footer: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Aggregated: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Pivot: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      PivotValue: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Expander: PropTypes.oneOfType([
        PropTypes.element,
        PropTypes.string,
        PropTypes.func,
      ]),
      Filter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),

      // All Columns
      sortable: PropTypes.bool, // use table default
      resizable: PropTypes.bool, // use table default
      filterable: PropTypes.bool, // use table default
      show: PropTypes.bool,
      minWidth: PropTypes.number,

      // Cells only
      className: PropTypes.string,
      style: PropTypes.object,
      getProps: PropTypes.func,

      // Pivot only
      aggregate: PropTypes.func,

      // Headers only
      headerClassName: PropTypes.string,
      headerStyle: PropTypes.object,
      getHeaderProps: PropTypes.func,

      // Footers only
      footerClassName: PropTypes.string,
      footerStyle: PropTypes.object,
      getFooterProps: PropTypes.object,
      filterMethod: PropTypes.func,
      filterAll: PropTypes.bool,
      sortMethod: PropTypes.func,
    }),
  ),

  // Global Expander Column Defaults
  expanderDefaults: PropTypes.shape({
    sortable: PropTypes.bool,
    resizable: PropTypes.bool,
    filterable: PropTypes.bool,
    width: PropTypes.number,
  }),

  pivotDefaults: PropTypes.object,

  // Text
  previousText: PropTypes.node,
  nextText: PropTypes.node,
  loadingText: PropTypes.node,
  noDataText: PropTypes.node,
  pageText: PropTypes.node,
  ofText: PropTypes.node,
  rowsText: PropTypes.node,

  // Components
  TableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TheadComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TbodyComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TrGroupComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TrComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ThComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TdComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  TfootComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  FilterComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ExpanderComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PivotValueComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  AggregatedComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  // this is a computed default generated using
  PivotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
  PaginationComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PreviousComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  NextComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  LoadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  NoDataComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  ResizerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
  PadRowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
}

和 webpack.config.js 文件：

module.exports = {
  entry: [
    'babel-polyfill',
    './Scripts/App.js',
    ],
  output: {
    filename: 'Scripts/ReactBundle/bundle.js'
  },
  resolve: {
    extensions: ['.Webpack.js', '.web.js', '.js', '.jsx'],
    mainFields: ["main"]
  },
  module: {
      rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',               
            query:
                  {
                      presets: ['react', 'es2017', 'es2015', 'stage-2'],
                      plugins: ['transform-class-properties']
                  }
        },
      ]
  },  
}

这不会破坏代码的执行，它只会阻止我浏览源代码或在调试器中正确查看内容，但我非常感谢任何关于正在发生的事情的见解。

谢谢！

4

2 回答 2

3

我刚刚遇到了这个问题，在包里翻来覆去之后，我像这样导入了表格：

import ReactTable from 'react-table/lib'

看起来它包含转译的 ES6，但没有导致错误的导入语法。

于 2018-04-06T21:28:26.083 回答
0

更新：地址提问者的评论。

如果您使用的是 webpack（很可能使用babel），请确保resolve.mainFields没有设置为main. 我想知道为什么浏览器会抱怨import应该由babel. 在 上npm，prop-types包将其main条目声明为index.js，这是一个 CommonJS 模块。如果webpack正在捆绑该文件，它应该能够处理prop-types.

原来的：

您是否通过 webpack 之类的打包程序运行代码？如果您使用script标签prop-types进入您的页面，则需要使用预构建的 JS 文件。

该import ReactTable from "react-table"行不起作用，因为那是 ES 模块，并且要在 chrome 中使用 ES 模块，您需要使用type="module"属性对其进行标记。

于 2018-04-03T14:15:06.137 回答