Question

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

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";用于react-table中的version 6，不支持版本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

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

1 个答案: