javascript - 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Question

我正在尝试 react-tables 的基本示例，我收到此错误“错误：元素类型无效：预期字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。你可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。” 而我已经导出了组件。这是我的代码

import React, { Component } from 'react';  
import ReactTable from "react-table";  

const data = [{
    name: 'Ayaan',
    age: 26
}, {
    name: 'Ahana',
    age: 22
}, {
    name: 'Peter',
    age: 40
}, {
    name: 'Virat',
    age: 30
}, {
    name: 'Rohit',
    age: 32
}, {
    name: 'Dhoni',
    age: 37
}]

const columns = [{
    Header: 'Name',
    accessor: 'name'
}, {
    Header: 'Age',
    accessor: 'age'
}]

export default class TableTry extends Component {  
    render() {  
        return (  
            <div>  
                <ReactTable  
                    data={data}  
                    columns={columns}  

                />  
            </div>        
        )       
    }  
} 

以下是版本详细信息：

"react": "^16.13.1",
"react-table": "^7.0.4"

Answer 1

import ReactTable from "react-table";适用于6版react-table，不支持 7 版。您可以使用react-table-6

import React from "react";
import "./styles.css";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
const data = [
  {
    name: "Ayaan",
    age: 26
  },
  {
    name: "Ahana",
    age: 22
  },
  {
    name: "Peter",
    age: 40
  },
  {
    name: "Virat",
    age: 30
  },
  {
    name: "Rohit",
    age: 32
  },
  {
    name: "Dhoni",
    age: 37
  }
];
const columns = [
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Age",
    accessor: "age"
  }
];

export default function App() {
  return (
    <div className="App">
      <ReactTable data={data} columns={columns} />
    </div>
  );
}

在这里检查CodeSandBox