0
175
Views¿Por qué no se representa <navBar/>? (reaccionar.js)
En React.js, estoy tratando de mostrar un banner con una barra de navegación debajo (cosas básicas) pero no puedo resolverlo.
Mi código navBar.js actual
import React from "react"; import { ReactDOM } from "react-dom"; export function navBar() { return ( <div> <nav className = "nav"> <a>Upload Items</a> <a>New Items</a> <a>Textbooks</a> <a>Electronics</a> <a>Life</a> <a>Accessories</a> <a>others</a> </nav> </div> ); } import logo from './logo.svg'; import React, { useState } from 'react'; import './App.css'; import ReactDOM from 'react-dom'; import {navBar} from './components/navBar' function App() { //let [categories, setCategories] = useState(['textbooks', 'electronics', 'life', 'accessories', 'others']) return ( <div className="App"> <header className="App-header"> <img className='logo' src={require('./revelliePicture.jpg')}/> <h1>Aggie Market</h1> </header> <navBar /> </div> ); } export default App;Estado actual de la interfaz de usuario
·
Juan Pablo Isaza
2 answers
Answer question0
Esto se debe a que React (Babel) diferencia entre componentes DOM integrados y componentes definidos por el usuario. Si su componente no comienza con una letra mayúscula, se supone que es un componente/elemento DOM, ya que no existe tal elemento DOM, no funciona como se esperaba.
Corrija su nombre y obtendrá la interfaz de usuario deseada.
Lea los documentos oficiales aquí
·
Juan Pablo Isaza
Report
0
Cambio :
import React from "react"; import { ReactDOM } from "react-dom"; export function navBar() { return ( <div> <nav className = "nav"> <a>Upload Items</a> <a>New Items</a> <a>Textbooks</a> <a>Electronics</a> <a>Life</a> <a>Accessories</a> <a>others</a> </nav> </div> ); }a:
import React from "react"; import { ReactDOM } from "react-dom"; export function NavBar() { return ( <div> <nav className = "nav"> <a>Upload Items</a> <a>New Items</a> <a>Textbooks</a> <a>Electronics</a> <a>Life</a> <a>Accessories</a> <a>others</a> </nav> </div> ); }El nombre de los componentes de React debe comenzar con una letra mayúscula.
Luego utilícelo como: <NavBar />
Razones de este comportamiento: ¿Los nombres de los componentes de ReactJS deben comenzar con letras mayúsculas?
·
Juan Pablo Isaza
Report
Answer question