Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
我正在尝试 react-tables 的基本示例,但出现了这个错误
"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
而我已经导出了组件。
这是我的代码
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"
import ReactTable from "react-table";
用于 version 6 of react-table
, version 7 is not supported. You can use 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
我正在尝试 react-tables 的基本示例,但出现了这个错误 "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports." 而我已经导出了组件。 这是我的代码
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"
import ReactTable from "react-table";
用于 version 6 of react-table
, version 7 is not supported. You can use 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