0

我正在尝试一个名为react-table. 似乎适合我所追求的，因此试图利用在一些现有代码中找到的示例。

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

在此处输入图像描述

下面我将展示我index.js的Main.js、 和我在.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")
);

主.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"));

因此，如果我删除了对这个“管理”组件的所有引用，我的应用程序运行良好，并且在我尝试使用/实现此表之前运行良好。

4

2 回答 2

1

只是改变 - import { ReactTable } from 'react-table';

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

于 2018-02-12T05:58:49.597 回答
1

将您的反应表导入更改为

import ReactTable from 'react-table';

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

于 2018-02-12T05:49:20.400 回答