我正在考虑在项目中使用React-Bootstrap-Table模块。我想将它包装在一个名为Table的React组件中,它将简单地公开react-bootstrap-module,同时还提供默认样式表和自定义样式表。包装器组件将存在于一个通用的UI-Kit中,因此以这种方式封装它将使其更容易在其他项目中使用并防止与css等的不一致。
在名为Table的文件夹中,我有以下@richsilv建议
index.js
import Table from './Table'
export default Table
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已定义但从未使用过,并且任何引导表组件都被使用但从未定义过。另外,我觉得我不能像正常情况那样破坏桌子,这很烦人。
希望这是对我包装模块的方式的一个简单改变,但任何帮助都会受到极大的欢迎。
更新
实施@richsilv建议后抛出错误
答案 0 :(得分: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'
IGNORE BELOW
试试这个:
import Table from './Table'~~
export default Table~~
export * from './Table'