Javascript 基于表信息的React呈现方法混乱

我正在试用一个名为

react table

的库。似乎符合我的要求，因此尝试利用一些现有代码中的示例

作为react方面的专家，我发现组件的导出方式与我的偏好不同。调整不同的方式，我继续得到错误。基本上，在

导出默认管理之间切换和
渲染(

下面我将显示我的
index.js
，
Main.js
，以及我要在
Admin.js
中为其添加此表的组件

My 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")
);

从“React”导入React；
从“react dom”导入react dom；
从“/Main”导入Main；
导入'bootstrap/dist/css/bootstrap.css'；
导入“/index.css”；
ReactDOM.render(
,
document.getElementById（“根”）
);

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;

import React，{Component}来自“React”；
进口{
路线,，
导航链接，
哈希路由器
}从“反应路由器dom”；
进口{
集装箱，
按钮
上校，
一行
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
NavItem}来自“reactstrap”
导入“/Main.css”；
从“/Home”导入主页；
从“/Admin”导入管理员；
从“/Users”导入用户；
从“/findcustForm”导入findCust；
从“/ConnCust”导入ConnCust；
从“/requesttrainingForm”导入requesttrainingForm；
从“/supportImmersion”导入supportImmersion；
从“/CustomerImpression”导入CustomerImpression；
从“/Confirm”导入确认；
从“/trainOlt”导入trainOlt；
从“/trainIlt”导入trainIlt；
从“/learnmb”导入learnmb；
类主扩展组件{
render（）{
返回(
嗨，identityapi用户名
);
}
}
导出默认主；

现在，我的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"));

import React，{Component}来自'React'；
从'react dom'导入{render}；
进口{
路线,，
导航链接，
哈希路由器
}从“反应路由器dom”；
进口{
集装箱，
一行
按钮}来自“reactstrap”；
从“react table”导入{ReactTable}；
从“/Utils”导入{makeData，Logo，Tips}；
导入“react table/react table.css”；
类管理扩展组件{
构造函数（）{
超级（）；
此.state={
数据：makeData（）
};
}
render（）{
const{data}=this.state；
返回(
d、 姓氏
}
]
},
{
标题：“信息”，
栏目：[
{
标题：“年龄”，
访问者：“年龄”
},
{
标题：“状态”，
访问者：“状态”
}
]
},
{
标题：“统计数据”，
栏目：[
{
标题：“访问”，
访问者：“访问”
}
]
}
]}
defaultPageSize={10}
className=“-striped-突出显示”
/>


);
}
}
导出默认管理员；
//render（，document.getElementById（“根”））；

因此，如果我删除对该“管理”组件的所有引用，我的应用程序运行良好，并且在我尝试使用/实现该表之前就已经运行了。
将react表导入更改为

import ReactTable from 'react-table';

react table
具有默认导出。因此不要使用
import{ReactTable}from'react table
将react table导入更改为

import ReactTable from 'react-table';

react table
具有默认导出。因此不要使用
import{ReactTable}from'react table
只需更改--
import{ReactTable}from'react table'；

要--
从“react table”导入ReactTable；
只需更改--
从“react table”导入{ReactTable}；

要--
从“react table”导入ReactTable；
在我看来，错误/警告非常清楚。
ReactTable
或
Tips
或
Logo
是
未定义的
（表示您没有正确导入组件）。错误/警告非常清楚。
reactable
或
Tips
或
Logo
是
未定义的
（表示您没有正确导入组件）。谢谢。不过，有人能解释一下为什么需要以这种方式导入，而不是以其他方式使用
import
吗？非常感谢。@Mark，请查看。如果您仍然有问题，请告诉我，我会向您解释。@Mark:顺便说一句，这正是错误所说的：“…或者您可能混淆了默认导出和命名导出“。谢谢。不过，有人能解释一下为什么需要以这种方式导入，而不是以其他方式使用
import
吗？非常感谢。@Mark，请查看。如果您仍然有问题，请告诉我，我会向您解释。@Mark:顺便说一句，这正是错误所说的：“…或者您可能混淆了默认导出和命名导出”。