2017-03-02 2 views
0

Je cherche à utiliser le module React-Bootstrap-Table dans mon projet. Je veux envelopper dans un composant React appelé Table qui exposera simplement le module de réaction-bootstrap-module mais aussi tirer dans la feuille de style par défaut et une feuille de style personnalisée. Le composant wrapper va vivre dans un UI-Kit commun afin de l'encapsuler de cette manière le rendra plus facile à utiliser dans d'autres projets et éviter les incohérences avec css etc.Habillage d'un module de noeud multi-exportation dans React Component

Dans un dossier appelé Table, j'ai la suggestion @richsilv suivante

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 

Je suis alors en train d'importer dans un autre composant si ...

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

Cela me donne l'erreur suivante

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 étant le composant que je suis en train d'importer dans le tableau.

Étrangement si je

import Table from '../Table' 

le tableau sera rendu sans problème. Le seul problème avec cela est qu'il ne loupe pas parce que Table est défini mais jamais utilisé et que l'un des composants de la table d'amorçage est utilisé mais jamais défini. De plus c'est juste énervant que je ne puisse pas déstructurer Table comme je le ferais normalement!

J'espère que c'est un simple changement dans la façon dont j'emballe le module, mais toute aide serait grandement appréciée.

Mise à jour

Erreur générée après la mise en œuvre @richsilv suggestion

enter image description here

Répondre

0

Toutes mes excuses pour perdre votre temps, je devrais avoir lu mieux la question. Il est Table.js qui doit changer:

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 CI-DESSOUS

Essayez ceci:

import Table from './Table'~~ 

export default Table~~ 
export * from './Table' 
+0

merci pour la réponse, mais qui me donne erreur de syntaxe: importation jeton inattendu – bencrinkle

+0

mais il fonctionne sans erreur si vous supprimez la dernière ligne? – richsilv

+0

et importer Table dans le composant sans déstructurer oui – bencrinkle