在渲染和CSS导入中带有react-table的问题

Question

我有要在父组件中渲染的组件。但是它不起作用，给我一个错误

react.createelement类型无效，预期为字符串，但未定义

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

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导入行，则会收到错误消息

找不到模块：无法解析'react-table / react-table.css'

我签入package.json，其版本为“ react-table”：“ ^ 7.0.4”。但是我看不到node_module中的react-table.css文件。我在这里想念什么。

Answer 1

反应表7x是先前版本的entirely different。您的代码类似于React Table版本6。

您需要安装react-table-6

npm i react-table-6

或

yarn add react-table-6 

安装后，您需要像这样导入反应表

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

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

关于第一个问题，状态可能在初始渲染中没有数据。

尝试替换

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

with

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