在 React.js 中，我試圖渲染一個帶有導航欄的橫幅（基本的東西），但我無法弄清楚。
我當前的 navBar.js 代碼
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;
當前界面狀態
uj5u.com熱心網友回復：
這是因為 React (Babel) 如何區分內置 DOM 組件和用戶定義組件。如果您的組件不是以大寫字母開頭，則假定它是一個 DOM 組件/元素，因為沒有這樣的 DOM 元素，它不會按預期作業。
更正您的命名，您將獲得預期的 UI。
在此處閱讀官方檔案
uj5u.com熱心網友回復：
改變 ：
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 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>
);
}
React 組件名稱必須以大寫字母開頭。
然后像這樣使用它：<NavBar />
這種行為的原因：ReactJS 組件名稱必須以大寫字母開頭？
uj5u.com熱心網友回復：
導航欄.js：
import React from "react";
import { ReactDOM } from "react-dom";
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>
);
}
export default navBar
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457645.html
標籤：javascript 反应