基于 table 信息的 React 渲染方法混淆

Question

我正在试用一个名为 react-table 的库。似乎符合我的要求，因此尝试利用在某些现有代码中找到的示例 here。

我不是 React 专家，我看到组件的导出方式与我的喜好不同。调整不同的方式，我继续得到错误。基本上，一直在 export default Admin; 和 render(<Admin/>, document.getElementById("root")); 之间切换。我继续收到如下错误：

下面我将展示我的 index.js、Main.js 以及我为其添加此 table[=40= 的组件] 在 Admin.js.

我的index.js:

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import 'bootstrap/dist/css/bootstrap.css';
import "./index.css";

ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);

Main.js:

import React, { Component } from "react";
import {
    Route,
    NavLink,
    HashRouter
  } from "react-router-dom";
import {
  Container,
  Button,
  Col,
  Row,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem } from 'reactstrap'
import './Main.css';
import Home from "./Home";
import Admin from "./Admin";
import Users from "./Users";
import findCust from "./findcustForm";
import ConnCust from "./ConnCust";
import requesttrainingForm from "./requesttrainingForm";
import supportImmersion from "./supportImmersion";
import customerImmersion from "./customerImmersion";
import Confirm from "./Confirm";
import trainOlt from "./trainOlt";
import trainIlt from "./trainIlt";
import learnmb from "./learnMB";


      class Main extends Component {
        render() {
          return (
            <HashRouter>
              <div>
                <Row className="App-header">
                  <Col><h1 className="App-title"><a href="/">Moneyball: Customer and Partner focused development</a></h1></Col>
                  <Col><h1 className="App-title2">Hi, identityapi username</h1></Col>
                </Row>
                <div className="content">
                  <Route exact path="/" component={Home}/>
                  <Route path="/admin" component={Admin}/>
                  <Route path="/users" component={Users}/>
                  <Route path="/findcustForm" component={findCust}/>
                  <Route path="/requesttrainingForm" component={requesttrainingForm}/>
                  <Route path="/supportImmersion" component={supportImmersion}/>
                  <Route path="/ConnCust" component={ConnCust}/>
                  <Route path="/customerImmersion" component={customerImmersion}/>
                  <Route path="/Confirm" component={Confirm}/>
                  <Route path="/trainOlt" component={trainOlt}/>
                  <Route path="/trainIlt" component={trainIlt}/>
                  <Route path="/learnMB" component={learnmb}/>
                </div>
              </div>
            </HashRouter>
          );
        }
      }
    export default Main;

现在，我的 Admin.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  Route,
  NavLink,
  HashRouter
} from 'react-router-dom';
import {
    Container,
    Row,
    Button } from 'reactstrap';
import { ReactTable } from 'react-table';
import { makeData, Logo, Tips } from './Utils';
import "react-table/react-table.css";


class Admin extends Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName"
                },
                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                }
              ]
            },
            {
              Header: "Info",
              columns: [
                {
                  Header: "Age",
                  accessor: "age"
                },
                {
                  Header: "Status",
                  accessor: "status"
                }
              ]
            },
            {
              Header: 'Stats',
              columns: [
                {
                  Header: "Visits",
                  accessor: "visits"
                }
              ]
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

export default Admin;

// render(<Admin/>, document.getElementById("root"));

所以，如果我删除了对这个 "Admin" 组件的所有引用，我的应用程序运行良好并且在我尝试 use/implement 这个 table.

之前运行

Answer 1

将您的反应 table 导入更改为

import ReactTable from 'react-table';

react-table 有默认导出。所以不要用import { ReactTable } from 'react-table

Answer 2

只需更改 -- import { ReactTable } from 'react-table';

至----import ReactTable from 'react-table';