1
votes

Les composants React externes ne sont pas rendus dans App.js

Je suis très nouveau dans react.js. Lorsque je travaillais sur un projet d'entraînement, j'ai rencontré cette étrange erreur. Certains composants d'un fichier js externe sont rendus lors de l'importation et d'autres non.

app.js:

import React from 'react';
const Hello = (props) => {
    return (
        <div>
            <h1>
                Hello {props.name}!
            </h1>
        </div>
    );
}

export default Hello;

FunctionalClick.js:

import React from 'react'

function fuctionalClick() {
    return (
        <div>
            <button>Click</button>
        </div>
    )
}

export default fuctionalClick

bonjour.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './components/hello'
import functionalClick from './components/fuctionalClick'

class App extends Component {
  render() {
    return (
      <div className="App">

        <Hello name='Lol   '></Hello>

        <functionalClick></functionalClick>
      </div>
    );
  }
}

export default App;

FunctionClick.js ne rend pas mais la première méthode fait (hello.js). Même lorsque la syntaxe que j'ai suivie, était presque la même. entrez la description de l'image ici


0 commentaires

3 Réponses :


1
votes

Je pense que vous pourriez avoir une faute de frappe dans la déclaration de la fonction fuctionalClick . On dirait que vous manquez un n après le c . Votre composant peut être importé comme undefined . Consultez la console de votre navigateur pour d'autres informations.

Essayez de changer ceci:

<fuctionalClick></fuctionalClick>

et ça:

import fuctionalClick from './components/fuctionalClick'

Pour ça:

<functionalClick></functionalClick>

et ça:

import functionalClick from './components/fuctionalClick'

Et voyez si cela aide.


2 commentaires

Merci! Stupide que je suis. De plus, le nom du composant, importé, doit toujours commencer par une majuscule. Merci encore.


Tu n'es pas stupide. Ce truc peut être compliqué. Tu le fais bien! Continuez.



2
votes

Selon la documentation, les composants définis par l' utilisateur doivent être en majuscules

React affiche également des avertissements lorsque vous essayez d'utiliser des balises non HTML en minuscules.

Attention: utilise du HTML majuscule. Utilisez toujours des balises HTML minuscules dans React.

Avertissement: la balise n'est pas reconnue dans ce navigateur. Si vous vouliez rendre un composant React, commencez son nom par une lettre majuscule.

Vérifiez les avertissements ici: https://codesandbox.io/s/react-example-exw9h


0 commentaires

1
votes

Dans votre question, des erreurs typographiques mais parfois non fonctionnelles, vérifiez d'abord le nom de vos composants plus tard. s'il est petit, faites-le en capital.


1 commentaires

Il est utile dans votre réponse de lister quelle / où se trouve la faute de frappe pour l'OP ainsi que de citer toutes les exigences de capitalisation que l'OP devrait changer dans son code.