1 JSX 是一個運算式
JSX 是 JavaScript 的語法擴展，本質上是 React.createElement()方法的語法糖，
Babel 會把 JSX 轉譯成一個名為 React.createElement() 函式呼叫，所以它被看作一個運算式，
這意味著你可以在 if 陳述句和 for 回圈的代碼塊中使用 JSX，將 JSX 賦值給變數，把 JSX 當作引數傳入，以及從函式中回傳 JSX：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
2 JSX 的屬性
2.1 駝峰命名
JSX 是 JS 的擴展，所以使用駝峰命名來定義屬性的名稱，而不使用HTML 屬性名稱的命名約定
比如：
<div className="container"></div>
上述 JSX 運算式中 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 標簽沒有子元素
如果一個標簽中沒有內容，可以使用/>來閉合標簽
比如：
const element = <img src=https://www.cnblogs.com/bidong/archive/2022/02/24/{user.avatarUrl} />;
4 JSX 防止注入攻擊
可以安全地在 JSX 中插入用戶輸入內容
React DOM 在渲染所有輸入內容之前，默認會進行轉義，它可以確保在你的應用中，永遠不會注入那些并非自己明確撰寫的內容，所有的內容在渲染之前都被轉換成了字串，這樣可以有效地防止 XSS（cross-site-scripting, 跨站腳本）攻擊，
5 唯一父元素
JSX 運算式必須有一個父元素
換句話說，下面的寫法會報錯
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 組件能夠在不額外創建 DOM 元素的情況下，讓 render() 方法中回傳多個元素，
render() {
return (
<React.Fragment>
Some text.
<h2>A heading</h2>
</React.Fragment>
);
}
也可以使用其簡寫語法 <></>，請參閱 React v16.2.0: Fragments 支持改進，
render() {
return (
<>
Some text.
<h2>A heading</h2>
</>
);
}
公眾號【前端嘛】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/432024.html
標籤：其他
上一篇：聊聊動效降級