0

我正在考虑在我的项目中使用React-Bootstrap-Table模块。我想将它包装在一个名为 Table 的 React 组件中，该组件将简单地公开 react-bootstrap-module，但还会引入默认样式表和自定义样式表。包装器组件将存在于一个通用的 UI-Kit 中，因此以这种方式封装它将更容易在其他项目中使用，并防止与 css 等不一致。

在名为 Table 的文件夹中，我有以下 @richsilv 建议

index.js

import Table from './Table'

export default Table

表.js

import * as ReactBootstrapTable from 'react-bootstrap-table'
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'
import './TableStyles.scss'

export default ReactBootstrapTable

然后我试图将它导入到另一个组件中......

import { BootstrapTable, TableHeaderColumn } from '../Table'

这给了我以下错误

Invariant Violation: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components) but 
got: undefined. You likely forgot to export your component from the
file  it's defined in. Check the render method of `ExportCSVTable`.

ExportCSVTable 是我试图将 Table 导入的组件。

奇怪的是，如果我这样做

 import Table from '../Table'

表格将毫无问题地呈现。唯一的问题是它无法进行 linting，因为 Table 已定义但从未使用过，并且任何引导表组件都已使用但从未定义过。另外，我不能像往常那样解构 Table，这很烦人！

希望这是对我包装模块的方式的简单改变，但任何帮助都会得到很大的帮助。

更新

实施@richsilv 建议后引发错误

在此处输入图像描述

4

1 回答 1

0

很抱歉浪费您的时间，我真的应该更好地阅读这个问题。这Table.js是需要改变的：

import * as ReactBootstrapTable from 'react-bootstrap-table'
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'
import './TableStyles.scss'

export default ReactBootstrapTable
export * from 'react-bootstrap-table'

忽略下方

尝试这个：

import Table from './Table'~~

export default Table~~
export * from './Table'
于 2017-03-02T09:10:41.203 回答