Ошибка при экспорте класса по умолчанию - React

Question

Я получаю сообщение об ошибке при экспорте класса ReactTable.

Я пытаюсь создать таблицу React, в которой будут вложенные столбцы.Я следую учебнику React-table.org . демо руководства.

Это мой код реакции.Я новичок в том, что касается React.

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
 import ReactTable from "react-table";
 import "react-table/react-table.css";

 const 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"
  }
 ]
}
];

class ReactTableComponent extends React.Component {
  constructor() {
  super();
  this.state = {
   data: makeData()
  };
 }
  render() {
   const { data } = this.state;
    return (
  <div>
    <ReactTable
      data={data}
      columns={columns}
      defaultPageSize={10}
      className="-striped -highlight"
      SubComponent={row => {
        return (
          <div style={{ padding: "20px" }}>
            <em>
              You can put any component you want here, even another React
              Table!
            </em>
            <br />
            <br />
            <ReactTable
              data={data}
              columns={columns}
              defaultPageSize={3}
              showPagination={false}
              SubComponent={row => {
                return (
                  <div style={{ padding: "20px" }}>
                    Another Sub Component!
                  </div>
                );
              }}
            />
          </div>
        );
      }}
    />
    <br />
    <Tips />
    <Logo />
  </div>
);
  }
}

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

export default class ReactTableComponent;

Я пытаюсь создать таблицу, подобную этой: 1.

Я получаю такую ​​ошибку на VSCode, как изображение 2

Я хочу экспортировать этот компонент React Table, чтобы я мог его импортироватьна других страницах и используйте его повторно.

Answer 1

, если вы хотите экспортировать только этот компонент без проблем, в следующий раз вы можете просто набрать:

export class ReactTableComponent extends React.Component {
  constructor() {
  super();
.............

, затем при импорте:

import { ReactTableComponent } from 'blahblah'

Answer 2

Вам просто нужно:

export default ReactTableComponent;