Обертывание модуля с несколькими экспортными узлами в React Component

Я рассматриваю возможность использования модуля React-Bootstrap-Table в своем проекте. Я хочу обернуть его в компонент React под названием Table, который просто выставит модуль react-bootstrap, но также вытащит таблицу стилей по умолчанию и пользовательскую таблицу стилей. Компонент-оболочка будет жить в общем 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 — это компонент, в который я пытаюсь импортировать таблицу.

Странно, если я

 import Table from '../Table'

Таблица будет отображаться без проблем. Единственная проблема заключается в том, что он не может линтинговать, потому что таблица определена, но никогда не используется, и любой из компонентов таблицы начальной загрузки используется, но никогда не определяется. Кроме того, меня просто раздражает, что я не могу разрушить таблицу, как обычно!

Надеюсь, это простое изменение в том, как я упаковываю модуль, но любая помощь будет принята с благодарностью.

Обновлять

Ошибка возникает после реализации предложения @richsilv

введите здесь описание изображения


reactjs es6-modules react-bootstrap-table
person bencrinkle    schedule 02.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Извиняюсь за трату вашего времени, я действительно должен был прочитать вопрос лучше. Это 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'
person richsilv    schedule 02.03.2017
comment
спасибо за ответ, но это дает мне синтаксическую ошибку: неожиданный импорт токена - person bencrinkle; 02.03.2017
comment
но он работает без ошибок, если вы удалите последнюю строку? - person richsilv; 02.03.2017
comment
и импортировать таблицу в компонент без деструктуризации да - person bencrinkle; 02.03.2017
comment
ты транспилируешь? - Я думаю, что это допустимый синтаксис, и он отлично переносится. для меня. - person richsilv; 02.03.2017
comment
да, я транспилирую, я прикрепил скриншот, где выдается ошибка - person bencrinkle; 02.03.2017
comment
спасибо за ваши усилия, но все еще не работает. Я просто получаю ту же непредвиденную ошибку токена - person bencrinkle; 03.03.2017