在 React 中，JSX（JavaScript XML）是一種語法擴展，它允許開發者在 JavaScript 代碼中使用類似 HTML 的語法。JSX 提升了代碼的可讀性和可維護性，使得編寫和構建用戶界面更加直觀。它被廣泛應用于 React 組件的定義。

一、JSX 的基本語法

（一）基本元素

JSX 語法允許在 JavaScript 代碼中直接使用 HTML 標簽，例如：

const element = <h1>Hello, world!</h1>;

這里的?element?是一個 JSX 元素，表示一個包含文本的?h1?標簽。

（二）嵌套標簽

// 嵌套標簽 利用 小括號() 
const element = (<div><h1>Hello, world!</h1><p>JSX 語法：嵌套標簽使用小括號 () </p></div>
);

二、語法規則

（一）單一根標簽

每個 JSX 表達式必須只有一個根元素；如果有多個元素，它們必須被包裹在一個父元素中。

若不想標簽中增加額外的 <div>，可以用 <> 和 </> 元素來代替。這個空標簽被稱作 Fragment。

原理：JSX 雖然看起來很像 HTML，但在底層其實被轉化為了 JavaScript 對象，不能在一個函數中返回多個對象，除非用一個數組把他們包裝起來。這就是為什么多個 JSX 標簽必須要用一個父元素或者 Fragment 來包裹。

例如：

// 正確
const element = (<div><h1>Hello</h1><h2>World</h2></div>
);
// 或者
const element = (<><h1>Hello</h1><h2>World</h2></>
);
// 錯誤
const element = (<h1>Hello</h1><h2>World</h2>
);
// 且標簽必須閉合// 正確
<input type="text">輸入內容</input>
// 或者 
<input type="text" />// 錯誤
<input type="text">

（二）使用大括號

在 JSX 中，可以用 { }??包裹 JavaScript 表達式。

標簽中混入 JS 表達式?時要使用 大括號 { }

例如：

const name = "Tom";
// 字符串 name 的值會被插入到 JSX 中
const element = <h1>Hello, {name}!</h1>; // Hello,Tom!

（三）條件渲染

const isLoggedIn = true;
// 可以使用 JavaScript 表達式來進行條件渲染
const greeting = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

function MyComponent({ isVisible }) {return (<div>{isVisible ? <p>這是可見的</p> : <p>這是不可見的</p>}</div>);
}

（四）循環渲染

通過數組方法（如：map）渲染列表：

// 通過數組方法（如 map）渲染列表
const numbers = [1, 2, 3, 4];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);

function MyComponent({ items }) {return (<ul>{items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);
}

（五）JSX 與組件

?父組件可以包含子組件

標簽字母首寫：

• 若小寫字母開頭，則將該標簽轉為 html 中同名元素，若 html 中無該標簽對應的同名元素，則報錯；
• 若大寫字母開頭，react 就去渲染對應的組件，若組件沒有定義，則報錯。

function MyComponent() {return <h1>Hello from MyComponent!</h1>;
}
// 父組件可以包含子組件
function App() {return (<div><MyComponent /></div>);
}

（六）內聯樣式

可以通過?style?屬性將行內樣式應用于 JSX 元素，需要傳入一個對象

// 內聯樣式 使用 雙括號 {{ }}
const element = <div style={{ color: 'blue', fontSize: '20px' }}>內聯樣式</div>;

（七）事件處理

事件處理在 JSX 中使用駝峰命名法，使用?on<EventName>?的方式綁定事件，如，onClick事件。

function handleClick() {alert('8520!');
}const element = <button onClick={handleClick}>點擊</button>;

（八）JSX 的編譯

// jsx 語句
const element = <h1>Hello, world!</h1>;// 編譯后：(標簽，標簽屬性，標簽內容）
const element = React.createElement('h1', null, 'Hello, world!');

三、總結

JSX 是一種強大的語法擴展，使得在 React 中構建用戶界面更加簡潔和清晰。通過使用 JSX，開發者可以輕松地構建和組織組件，并處理狀態、事件和樣式等功能。