react中JSX的注意點詳解

更新時間：2022年03月10日 16:45:54 作者：蜜瓜

這篇文章主要為大家詳細介紹了react中JSX的注意點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1 JSX 是一個表達式

JSX 是 JavaScript 的語法擴展，本質上是 React.createElement()方法的語法糖。

Babel 會把 JSX 轉譯成一個名為 React.createElement() 函數調用，所以它被看作一個表達式。

這意味著你可以在 if 語句和 for 循環(huán)的代碼塊中使用 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={user.avatarUrl} />;

4 JSX 防止注入攻擊

可以安全地在 JSX 中插入用戶輸入內容

React DOM 在渲染所有輸入內容之前，默認會進行轉義。它可以確保在你的應用中，永遠不會注入那些并非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字符串。這樣可以有效地防止 XSS攻擊。

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 組件能夠在不額外創(chuàng)建 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>
    </>
  );
}

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

您可能感興趣的文章:

React?Hooks--useEffect代替常用生命周期函數方式
這篇文章主要介紹了React?Hooks--useEffect代替常用生命周期函數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
用react-redux實現(xiàn)react組件之間數據共享的方法
這篇文章主要介紹了用react-redux實現(xiàn)react組件之間數據共享的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
react中hooks使用useState的更新不觸發(fā)dom更新問題及解決
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
淺談react.js 之批量添加與刪除功能
下面小編就為大家?guī)硪黄獪\談react.js 之批量添加與刪除功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
React Hooks常用場景的使用(小結)
這篇文章主要介紹了React Hooks常用場景的使用，根據使用場景分別進行舉例說明，幫助你認識理解并可以熟練運用 React Hooks 大部分特性，感興趣的可以了解一下
2021-04-04
react-native-tab-navigator組件的基本使用示例代碼
本篇文章主要介紹了react-native-tab-navigator組件的基本使用示例代碼，具有一定的參考價值，有興趣的可以了解一下
2017-09-09
React?實現(xiàn)具備吸頂和吸底功能組件實例
這篇文章主要為大家介紹了React?實現(xiàn)具備吸頂和吸底功能組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
Redux使用方法和基本原理解讀
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
react中的ajax封裝實例詳解
這篇文章主要介紹了react中的ajax封裝實例詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下
2017-10-10
如何在React?Native開發(fā)中防止滑動過程中的誤觸
在使用React?Native開發(fā)的時，當我們快速滑動應用的時候，可能會出現(xiàn)誤觸，導致我們會點擊到頁面中的某一些點擊事件，誤觸導致頁面元素響應從而進行其他操作,表現(xiàn)出非常不好的用戶體驗。
2023-05-05