目錄
- 一、JSX簡介
- 二、為何使用JSX？
- 三、JSX運算式
- 四、JSX 特定屬性
- 五、JSX 樣式
- 六、JSX 陣列
一、JSX簡介
JSX 又名 JavaScript XML，JavaScript 的 XML 類語法擴展，在 js 中寫一些 xml標簽（html標簽），
JSX 僅僅只是 React.createElement(component, props, …children) 函式的語法糖，
二、為何使用JSX？
React不一定要使用JSX，為何強烈建議使用JSX，在JS中是不支持<div></div>這樣的 html 標簽的，因此我們在使用 React 時只能通過 React.createElement() 函式的傳參來創建虛擬 DOM 元素（React 元素），這種在原生 JS 語法限制下的 React 的運用帶來了極大地不方便，不僅書寫上不方便，還需要在腦海中將 html 元素一個個地拆開來分析其包含與被包含的關系，考慮到這種不方便性，React 的開發者就使用了 JSX 語法，允許用戶在 js 檔案中直接使用 xml 語法寫明要創建的標簽元素資訊，
使用JSX:
ReactDOM.render(
<div>
<div>
<button id='clickme'>Click Me</button>
</div>
</div>,
document.getElementById('root')
);
不使用JSX：
ReactDOM.render(
React.createElement('div',null,
React.createElement('div',null,
React.createElement('button',{id: 'clickme'},'Click Me'))),
document.getElementById('root')
);
從上對比可以明顯看出JSX代碼更簡單，更偏向于XML/HTML格式 ，便于開發和維護，
React遇到元素標簽JSX，底層會編譯為React.createElement(component, props, …children) ，
三、JSX運算式
1、JSX嵌入運算式
在 JSX 中嵌入 JavaScript 運算式，運算式寫在花括號 {} 中：
ReactDOM.render(
<h1>{1+1}</h1>,
document.getElementById('root')
);
在 JSX 中不能使用 if else 陳述句，但可以使用 conditional (三元運算) 運算式來替代：
ReactDOM.render(
<h1>{i == 1 ? 'True!' : 'False'}</h1>,
document.getElementById('root')
);
2、JSX 也是一個運算式
可以在 if 陳述句和 for 回圈的代碼塊中使用 JSX運算式：
function getWelcome(isStyle) {
if (isStyle) {
return <h1>Hello, {1+1}!</h1>;
}
return <h1>Hello, world.</h1>;
}
四、JSX 特定屬性
可以通過使用引號，來將屬性值指定為字串字面量：
const element = <div id="name"></div>;
也可以使用大括號，來在屬性值中插入一個 JavaScript 運算式：
const element = <div src={user.name}></div>;
在屬性中嵌入 JavaScript 運算式時，不要在大括號外面加上引號，你應該僅使用引號（對于字串值）或大括號（對于運算式）中的一個，對于同一屬性不能同時使用這兩種符號，
五、JSX 樣式
React 推薦使用行內樣式，在指定元素數字后會自動添加 px：
var myStyle={
color:'blue',
fontSize:50
}
ReactDOM.render(
<div>
<h1 style={myStyle}>{"Hello, world"}</h1>
</div>,
document.getElementById('root')
六、JSX 陣列
JSX 允許在模板中插入陣列，陣列會自動展開所有成員：
var arr = [
<h1>hello!</h1>,
<h1>world!</h1>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
);
··················································································································································································
本文介紹JSX用法~~請大家多多指教，能get到知識點不要忘了關注點個贊~，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/97784.html
標籤：其他