React JSX基礎(chǔ)語法教程示例
更新時間：2023年09月15日 14:20:15 作者：羽旋杯水
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
1、什么是 JSX
JSX 是 JavaScript 的一種語法擴(kuò)展。可以組裝 UI 界面，同時可以和 JavaScript 語法配合使用。
2、為什么使用 JSX
- 使用熟悉的語法定義 HTML 元素，提供更加語義化的標(biāo)簽，使用 JSX 編寫模板更簡單快速
- 更加直觀：JSX 讓組件更加簡單、明了、直觀
- 抽象了 React 元素的創(chuàng)建過程，使得編寫組件變得更加簡單
舉例說明如下：
// react17版本之前
const children1 = React.createElement("li", null, "第一個組件內(nèi)容！");
const children2 = React.createElement("li", null, "第二個組件內(nèi)容！");
const root = React.createElement(
"ul",
{ className: "list" },
children1,
children2
);
// react17版本之后
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const root = _jsxs("ul", {
className: "list",
children: [
_jsx("li", {
children: "Hello",
}),
_jsx("li", {
children: "World",
}),
],
});JSX 等價如下：
const root = (
<ul className="list">
<li>Hello</li>
<li>World</li>
</ul>
);顯然 JSX 寫法更便于頁面的編寫與維護(hù)，且簡單、直觀。
3、JSX 書寫規(guī)范
- JSX 的最外層只能有一個根元素，可以使用 div 、span 等標(biāo)簽
- 正常情況下，我可以在最外層包裹一個小括號（），方便我們更好的格式化代碼
- JSX 中的標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽；注意：如果是單標(biāo)簽，必須以/>結(jié)尾
- 在使用變量時，我們可以將其放在一個大括號中，大括號內(nèi)可以放置任何有效的 JavaScript 表達(dá)式
代碼示例如下：
const root = (
<div className="list">
<div>第一個組件內(nèi)容！</div>
<img src="xxx.jpg" />
{1 === 1 && <div>第二個組件內(nèi)容！</div>}
</div>
);4、JSX 注釋
通常有以下三種注釋
<ul className="list">
{/* 1、單行注釋 */}
<li>第一個組件內(nèi)容！</li> // 2、行尾注釋
<li>第二個組件內(nèi)容！</li>
{/*
3、多行注釋
1
2
3
*/}
</ul>5、JSX 嵌入變量
變量在 JSX 使用，需要用大括號 { } 包裹；注意：使用的變量需要提前定義。如下。
const MyComponent = () => {
const text = "Hello World！";
return <div>{text}</div>;
};
export default MyComponent;6、JSX 嵌入表達(dá)式
- 運(yùn)算符表達(dá)式
- 三元表達(dá)式
- 函數(shù)調(diào)用
const MyComponent = () => {
const isFinish = true;
const calc = () => {
const a = 1;
const b = 2;
return a + b;
};
return (
<div>
{/*1.運(yùn)算符表達(dá)式*/}
<span>2 + 3 的和為：{2 + 3}</span>
{/*2.三元表達(dá)式*/}
<span>家庭作業(yè)是否完成：{isFinish ? "是" : "否"}</span>
{/*3.進(jìn)行函數(shù)調(diào)用*/}
<span>{calc()}</span>
</div>
);
};
export default MyComponent;7、JSX 綁定屬性
注意：在給元素綁定 style 時，外層的大括號是表示可傳入變量或者表達(dá)式。而內(nèi)部的大括號是一個對象，它里面是鍵值對，表示元素的樣式屬性及屬性值。另外，當(dāng)屬性是由多個單詞組成的時候，需要用駝峰命名法來表示，例如：fontSize
const MyComponent = () => {
const title = "我是標(biāo)題的全部內(nèi)容！";
const url = "https://www.baidu.com";
const className = "span";
return (
<div>
{/* 1、綁定普通屬性 */}
<h2 title={title}>我是標(biāo)題...</h2>
<a href={url}>百度一下</a>
{/* 2.綁定class */}
<span className={className}>我是span標(biāo)簽</span>
<span className={["tag", "span"].join(" ")}>我是span標(biāo)簽2</span>
{/* 3.綁定style */}
<span style={{ color: "red", fontSize: 16 }}>我的字體顏色是紅色</span>
</div>
);
};
export default MyComponent;8、JSX 綁定事件
可以看出 React 元素的事件處理和 DOM 元素的很相似，但存在一些語法上的差異：
- React 的事件采用駝峰式命名，而不是純小寫的方式
- 使用 JSX 語法時，需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串
- 使用函數(shù)時不能加括號，不然會直接執(zhí)行
- 如果函數(shù)過于簡單，可在 JSX 中直接編寫函數(shù)內(nèi)容
const MyComponent = () => {
const onClick = () => {
window.alert("您點(diǎn)擊了按鈕1");
};
return (
<div>
<button onClick={onClick}>按鈕1</button>
<button
onClick={() => {
window.alert("您點(diǎn)擊了按鈕2");
}}
>
按鈕2
</button>
</div>
);
};
export default MyComponent;9、JSX 條件渲染
常見的條件渲染的方式有以下三種：
- 方式一：條件判斷語句，適合邏輯較多的情況
- 方式二：三元運(yùn)算符，適合邏輯比較簡單
- 方式三：與運(yùn)算符&&，如果條件成立，渲染&&后面的組件；如果條件不成立，則都不渲染
const MyComponent = () => {
const renderTitle = (key) => {
if (key > 1) {
return <span>我是標(biāo)題1</span>;
}
return <span>我是標(biāo)題2</span>;
};
return (
<div>
{renderTitle(2)}
{2 > 1 ? <span>我會顯示出來</span> : <span>我會隱藏</span>}
{2 > 1 && <span>我會顯示出來</span>}
</div>
);
};
export default MyComponent;10、JSX 列表渲染
我們通常使用 Javascript 的 map 函數(shù)來處理 JSX 數(shù)組列表循環(huán)渲染；如下
const MyComponent = () => {
const array = ["1", "2", "3", "4"];
return (
<ul>
{array.map((i) => (
<li key={i}>{i}</li>
))}
</ul>
);
};
export default MyComponent;注意：在渲染是，我們需要給渲染項(xiàng)添加一個 key，不然會報(bào)錯：warning: Each child in a list should have a unique "key" prop.
key 和 React 中的 diff 算法密切相關(guān)。
以上就是React JSX基礎(chǔ)語法教程示例的詳細(xì)內(nèi)容，更多關(guān)于React JSX基礎(chǔ)語法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext
這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext,其實(shí)與vue中的ref和reactive一樣，通過useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了React SSR樣式及SEO的實(shí)踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
自己動手封裝一個React Native多級聯(lián)動
這篇文章主要介紹了自己動手封裝一個React Native多級聯(lián)動，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
react代碼模式分為兩種類組件和函數(shù)組件(生命周期也有所不同),這篇文章主要介紹了react生命周期(類組件/函數(shù)組件),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了React 組件生命周期的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了create-react-app降低react的版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡單組件，狀態(tài)里存儲數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動頁面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02
React hooks依賴數(shù)組:一個讓我加班到凌晨3點(diǎn)的男人
本文解析了React Hooks中依賴數(shù)組的工作機(jī)制,詳細(xì)闡述了無限循環(huán)、過時閉包、隱性依賴等常見陷阱,提供了解決方案,并總結(jié)了誠實(shí)聲明依賴、最小化effect職責(zé)等最佳實(shí)踐,感興趣的朋友跟隨小編一起看看吧2026-04-04
React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個鉤子函數(shù)，它可以幫助我們優(yōu)化渲染性能，并讓UI更加流暢，如果你還沒有嘗試過它，不妨在你的下一個React項(xiàng)目中試一試，這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08
本文主要介紹了React里的Fragment標(biāo)簽的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01