ReactJS - ne Peut pas importer les composants
Je suis tout nouveau à ReactJS. Je suis en développant un peu de single page app et je suis juste en train de créer ma composants à importer dans mon élément principal.
TestComponent.jsx
import React from 'react'
export class TestComponent extends React.Component {
render() {
return (
<div className="content">Test Component</div>
)
}
}
À l'intérieur de mon principal.jsx j'ai importé ce composant appelant
import TestComponent from './components/TestComponent.jsx'
Puis j'ai essayé d'appeler mon composant d'un itinéraire spécifique:
render(
(<Router history={history}>
<Route path="/" component={NavMenu}>
<IndexRoute component={Index}/>
<Route path="test" component={TestComponent}></Route>
</Route>
</Router>),
document.getElementById('main')
)
Je n'ai pas toutes les erreurs de la console, mais je ne vois pas mon composant. Ce que je fais mal?
OriginalL'auteur Luca Mormile | 2015-11-04
Vous devez vous connecter pour publier un commentaire.
L'importation de syntaxe sans accolades est pour l'importation par défaut les exportations, pour l'importation nommé exportations.
Faire de votre composant l'exportation par défaut:
TestComponent.jsx
Sinon, vous devriez être en mesure de l'importer en tant qu'il est avec l'instruction d'importation suivante:
Vous voudrez peut-être lire sur ES6 modules (par exemple dans Explorer ES6) si vous souhaitez utiliser ES6 dans votre Réagissent code.
Bien que cela fonctionne, j'avais recommandons généralement l'exportation par défaut. Vous devez disposer d'un composant par fichier, qui fonctionne parfaitement avec les valeurs par défaut des exportations. Mais la seconde certainement fonctionne aussi bien.
Vous êtes homme de droite, j'ai lu Réagir docs et ils expliquent la même recommandation. Je vais suivre cette approche, merci encore!
Pourquoi vous utilisez
export default
? Puis-je écrire deux classes dans un fichier, et ensuite appeler chacun d'eux dans un autre fichier?OriginalL'auteur Mad Scientist