Question

导出ReactTable类时出现错误。

我正在尝试创建一个具有子列的React表。我正在关注React-table.org tutorial。本教程的demo。

这是我的反应代码。就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所示的表格。

我在像图2的VSCode上收到这样的错误

我想导出此React Table组件，以便可以将其导入其他页面并重新使用。

Answer 1

您只需要：

export default ReactTableComponent;

Answer 2

如果您只想轻松导出此组件并且不希望出现问题，那么下次您可以键入：

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

然后在导入时：

import { ReactTableComponent } from 'blahblah'

导出默认类时出错-React

2 个答案: