react中JSX的注意點(diǎn)詳解
1 JSX 是一個表達(dá)式
JSX 是 JavaScript 的語法擴(kuò)展，本質(zhì)上是 React.createElement()方法的語法糖。
Babel 會把 JSX 轉(zhuǎn)譯成一個名為 React.createElement() 函數(shù)調(diào)用，所以它被看作一個表達(dá)式。
這意味著你可以在 if 語句和 for 循環(huán)的代碼塊中使用 JSX，將 JSX 賦值給變量，把 JSX 當(dāng)作參數(shù)傳入，以及從函數(shù)中返回 JSX：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
2 JSX 的屬性
2.1 駝峰命名
JSX 是 JS 的擴(kuò)展，所以使用駝峰命名來定義屬性的名稱，而不使用HTML 屬性名稱的命名約定
比如：
<div className="container"></div>
上述 JSX 表達(dá)式中 class 寫作 className
2.2 style 接收一個對象
style 接收一個對象，而不是字符串
比如：
let style = {
width: "100px",
height: "100px",
background: "red"
};
ReactDOM.render(
<div className="box" style={style}></div>,
document.querySelector("#root")
);
3 JSX 標(biāo)簽沒有子元素
如果一個標(biāo)簽中沒有內(nèi)容，可以使用/>來閉合標(biāo)簽
比如：
const element = <img src={user.avatarUrl} />;
4 JSX 防止注入攻擊
可以安全地在 JSX 中插入用戶輸入內(nèi)容
React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)不會注入那些并非自己明確編寫的內(nèi)容。所有的內(nèi)容在渲染之前都被轉(zhuǎn)換成了字符串。這樣可以有效地防止 XSS攻擊。
5 唯一父元素
JSX 表達(dá)式必須有一個父元素
換句話說，下面的寫法會報(bào)錯
ReactDOM.render(
<div className="box" style={style} />
<input type="text" />,
document.querySelector("#root")
);
正確的寫法：
ReactDOM.render(
<div>
<div className="box" style={style} />
<input type="text" />
</div>,
document.querySelector("#root")
);
如果我們不想讓父元素被渲染在頁面上，可以使用React.Fragment
React.Fragment 組件能夠在不額外創(chuàng)建 DOM 元素的情況下，讓 render() 方法中返回多個元素。
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}
也可以使用其簡寫語法 <></>，請參閱 React v16.2.0: Fragments 支持改進(jìn)。
render() {
return (
<>
Some text.
<h2>A heading</h2>
</>
);
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例
本篇文章主要介紹了ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
ReactNative-JS 調(diào)用原生方法實(shí)例代碼
這篇文章主要介紹了ReactNative-JS 調(diào)用原生方法實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
React中使用react-json-view展示JSON數(shù)據(jù)的操作方法
react-json-view是一個用于顯示和編輯javascript數(shù)組和JSON對象的React組件,本文給大家分享React中使用react-json-view展示JSON數(shù)據(jù)的操作方法,感興趣的朋友一起看看吧2023-12-12
npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
如何用webpack4.0擼單頁/多頁腳手架 (jquery, react, vue, typescript)
這篇文章主要介紹了如何用webpack4.0擼單頁/多頁腳手架 (jquery, react, vue, typescript)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送
這篇文章主要介紹了React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了React中的refs的使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02