0
80
ViewsComponentes de React Js importados pero no mostrados
Tengo dos componentes 'pie de página' y 'encabezado' en el directorio de componentes. Se importa correctamente, pero no puedo mostrarlo.
Aplicación.js
import header from "./components/header"; import footer from "./components/footer"; function App() { return ( <> <header /> <main> <h1>Welcome to Proshop</h1> </main> <footer /> </> ) } export default App;encabezado.js
import React from 'react' function header() { return ( <div>header</div> ) } export default headerpie de página.js
import React from 'react' function footer() { return ( <div>footer</div> ) } export default footerLa salida es solo esta
3 answers
Answer question0
Sus componentes deben comenzar con una letra mayúscula, de lo contrario, se tratarán como etiquetas html regulares, consulte los documentos en este
Cuando un tipo de elemento comienza con una letra minúscula, se refiere a un componente integrado como
<div>o<span>y da como resultado una cadena 'div' o 'span' pasada a React.createElement. Los tipos que comienzan con una letra mayúscula como<Foo />se compilan en React.createElement(Foo) y corresponden a un componente definido o importado en su archivo JavaScript.
Punto de bonificación:
cualquiera que sea el nombre del archivo de componentes que comience con la letra minúscula o mayúscula, siempre debe importarlo con mayúscula.
digamos que tenemos un nombre de archivo header.js y una función con el nombre header.
ayudaría si lo importaras así
import Header from './header'0
Debe poner en mayúscula el nombre de su componente. Por ejemplo: <Header /> .
0
Debe poner en mayúscula el nombre de su componente. por ejemplo, el encabezado será: <Header /> y el pie de página será <Footer />