2
votes

Pas d'export en composant? Réagir

Je suis vraiment désolé d'avoir perdu le temps des gens sur une erreur aussi stupide. Mais cela me rend fou, je ne sais pas pourquoi cela se produit. À ma connaissance, j'ai tout fait correctement. J'essaye donc d'importer un composant appelé NewSiteNav dans mon composant NewSite . Le chemin vers lequel je dirige est correct, je le sais même parce que j'utilise l'outil VSC qui vous aide à compléter automatiquement les sélections de chemin. J'ai écrit correctement l'importation, je l'ai essayé avec et sans ces {} et j'ai exporté correctement NewSiteNav en utilisant les deux classe par défaut d'exportation ... code> au début et export par défaut NewSiteNav à la fin. Veuillez aider le composant

NewSiteNav :

 import React, { Component } from 'react'
import { NewSiteNav } from '../components/NewSiteNav';

class NewSite extends Component {
  render () {
    return (
      <div className="App">
        <NewSiteNav />
        <div className="lander">
          <h1>New Site</h1>
        </div>
      </div>
    )
  }
}

export default NewSite;
   NewSite  composant: 
 import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap'

export default class NewSiteNav extends Component {
    render() {
        return (
                <div>
                    <Navbar>
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="#home">Home</Nav.Link>
                                <Nav.Link href="#link">Link</Nav.Link>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

reactjs

0 commentaires

4 Réponses :

2
votes

essayez de remplacer

import NewSiteNav from '../components/NewSiteNav';

par

import { NewSiteNav } from '../components/NewSiteNav';

1 commentaires

Quand je fais cela, j'obtiens l'erreur suivante Le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu: undefined. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées. Vérifiez la méthode de rendu de NewSiteNav .

0
votes

Essayez de réécrire votre composant enfant NewSiteNav component:

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap'

   export class NewSiteNav extends Component {
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

    export default NewSiteNav

Si cela ne vous aide pas, vérifiez que vous exportez / importez fichiers sur boucle circulaire. Peut-être que certains d'entre eux ne sont toujours pas chargés lorsque vous essayez de les utiliser dans un autre fichier. Consultez ce message: Redux / React. Vous devez passer un composant à la fonction renvoyée par connect. A la place reçu undefined

2 commentaires

Lorsque je fais cela, j'obtiens toujours l'erreur d'origine ./src/containers/NewSite.js Erreur d'importation tentée: 'NewSiteNav' n'est pas exporté depuis '../components/NewSiteNav'.

D'accord, alors dans ce cas, vérifiez ici stackoverflow.com/questions/49590362/... réponse décrivant. La personne là-bas a le même problème que vous

0
votes

Lorsque vous créez

export default class NewSiteNav extends React.Component{
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

vous pouvez l'importer sous le nom de votre choix

import newStireNave from './path'

mais quand vous le faites

export class NewSiteNav extends Component

assurez-vous de l'importer avec le nom correct

import foooName from './path'

si cette solution ne fonctionne pas pour vous essayez de changer s'étend de Composant à React.Component

export default class NewSiteNav extends Component

1 commentaires

Lorsque je fais cela, il élimine l'erreur d'origine et se compile. Mais alors on me présente ceci: Le type d'élément n'est pas valide: attendait une chaîne (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais obtenu: indéfini. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées. Vérifiez la méthode de rendu de NewSiteNav .

0
votes

Essayez d'exporter votre composant comme ceci

classe NewSiteNav étend le composant {...} exporter NewSiteNav par défaut

Et importez comme ceci

importer NewSiteNav depuis '../components/NewSiteNav';

Regardez ceci répondez pour plus d'explications sur l'importation ES6.

0 commentaires