【React】JSX 開發常見問題
1. 定義元件一定是手字大寫
/** wrong*/
function app(){
}
/** correct*/
function App(){
}2. 多個元素外層需要使用標籤包覆，或使用 React.Fragment
// wrong
function App(){
// return 後沒有東西預設會補; => 顯示錯誤
return
<div>
.....
</div>
}
// correct
function App(){
return <div>
......
</div>
}
// 不想包div 用 React.Fragment
function App(){
return <React.Fragment>
......
</React.Fragment>
}
// 同上
function App(){
return <>
......
</>
}
3. 沒有正確結尾，結尾不正確
<!-- wrong -->
<input class="form-control" list="datalistOptions"
id="exampleDataList" placeholder="Type to search...">
<!-- correct -->
<input className="form-control" list="datalistOptions"
id="exampleDataList" placeholder="Type to search..." />
4. 屬性轉換名稱運用要正確
<!-- wrong-->
<label htmlFor="exampleDataList" className="form-label" style="color: var(--bs-blue)">
Datalist example
</label>
<!-- correct-->
<label htmlFor="exampleDataList" className="form-label" style={{color: 'var(--bs-blue)'}}>
Datalist example
</label>5. return 建議加入括號
// wrong
function App(){
// return 後沒有東西預設會補; => 顯示錯誤
return
<div>
.....
</div>
}
// correct
function App(){
return (<div>
......
</div>)
}