渲染和 css 导入中的 react-table 问题

Question

我有一个正在父组件中呈现的组件。但它不起作用并给我一个错误

react.createelement type is invalid expected a string but got undefined

我有一个状态对象中的数据，它是一个对象数组。

import React, { Component } from "react";
import ReactTable from "react-table";
//import "react-table/react-table.css";


class CustomerTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: this.props.Data,
    };
  }

  render() {
    console.log("this.state.tableData", this.state.tableData);
    const columns = [
      {
        Header: "Customer ID",
        accessor: "CUSTOMER_ID",
      },
      {
        Header: "Customer Name",
        accessor: "NAME",
      },
      {
        Header: "Customer Type",
        accessor: "TYPE",
      },
    ];
    return (
      <div>
        <ReactTable columns={columns} data={this.state.tableData}>
        </ReactTable>
      </div>
    );
  }
}

export default CustomerTable;

另一个问题是，如果我取消注释 css 导入行，我会得到一个错误

Module not found: Can't resolve 'react-table/react-table.css'

我签入了 package.json，它的版本是 "react-table": "^7.0.4"。但是我在 node_module 中看不到 react-table.css 文件。我在这里错过了什么。

Answer 1

React table 7x 是 entirely different 之前的版本。你的代码看起来像 react table version 6.

您需要安装react-table-6

npm i react-table-6

或

yarn add react-table-6

安装后你需要像这样导入 react table

import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';

之后您的代码应该可以工作了。试试吧。

关于您的第一个问题，state 可能没有初始渲染中的数据。

尝试替换

<ReactTable columns={columns} data={this.state.tableData}>

和

<ReactTable columns={columns} data={this.state.tableData || []}>

渲染和 css 导入中的 react-table 问题

Issue with react-table in rendering and css import

reactjs

react-table