[英]Render element error not shown in reactJS
首先,當我導入 function 組件並嘗試在 app.js 文件中使用它時,該組件不會被渲染。 從圖中我們可以看到我們導入的header沒有被使用
app.js 文件的代碼在這里。
這是我的 app.js 文件的代碼。
import "./App.css";
import header from "./myComponents/header";
function App() {
return (
<>
<div>hello there</div>
<header/>
</>
);
}
export default App;
這是我在 header.js 文件中編寫的導航條碼。
import React from "react";
export default function header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Todos list
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
About
</a>
</li>
</ul>
<form className="d-flex">
<input
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button className="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
);
}
對於您的情況,組件名稱必須以大寫字母開頭,它應該是<Header/>
當元素類型以小寫字母開頭時,它指代內置組件,如 or 並導致傳遞給 React.createElement 的字符串 'div' 或 'span'。 以大寫字母開頭的類型,如編譯為 React.createElement(Foo) 並對應於 JavaScript 文件中定義或導入的組件。
In your header.js file add this line at the end and change your filename to Header.js(capital H):
像這樣export default Header
:
import React from "react";
export default function Header() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Todos list
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
About
</a>
</li>
</ul>
<form className="d-flex">
<input
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button className="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
);
}
export default Header;
and do these changes in your App.js :
import "./App.css";
import Header from "./myComponents/Header";
function App() {
return (
<>
<div>hello there</div>
<Header/>
</>
);
}
export default App;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.