在React Component

时间:2017-03-02 08:49:19

标签: reactjs es6-modules react-bootstrap-table

我正在考虑在项目中使用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建议后抛出错误

enter image description here

1 个答案:

答案 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'