Reactjs 在React组件中包装多导出节点模块
我正在考虑在我的项目中使用该模块。我想将它封装在一个名为Table的React组件中,该组件将简单地公开React引导模块,但也会引入默认样式表和自定义样式表。包装器组件将存在于一个通用的UI工具包中,因此以这种方式封装它将使其更易于在其他项目中使用,并防止与css等不一致 在一个名为Table的文件夹中,我有以下@richsilv建议 index.jsReactjs 在React组件中包装多导出节点模块,reactjs,es6-modules,react-bootstrap-table,Reactjs,Es6 Modules,React Bootstrap Table,我正在考虑在我的项目中使用该模块。我想将它封装在一个名为Table的React组件中,该组件将简单地公开React引导模块,但也会引入默认样式表和自定义样式表。包装器组件将存在于一个通用的UI工具包中,因此以这种方式封装它将使其更易于在其他项目中使用,并防止与css等不一致 在一个名为Table的文件夹中,我有以下@richsilv建议 index.js import Table from './Table' export default Table Table.js import * as
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是我试图将表导入的组件
奇怪的是,如果我这样做了
import Table from '../Table'
这张桌子将毫无问题地呈现出来。唯一的问题是,它无法linting,因为表已定义但从未使用,并且使用了任何引导表组件但从未定义。另外,我不能像平常一样分解表,这真是令人恼火
希望这是一个简单的改变,我包装模块的方式,但任何帮助将大大收到
更新
执行@richsilv建议后引发错误
很抱歉浪费您的时间,我真的应该把这个问题读得更清楚。需要更改的是
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'
感谢您的回答,但这给了我语法错误:意外的令牌导入,但如果您删除最后一行,它将运行而不会出错?并且在不分解结构的情况下导入组件中的表是的,您正在传输吗?-是的,我正在传输,我附上了一个错误抛出的屏幕截图