React中的JSX { }的使用詳解

2022-08-20 18:00:18

JSX概述

　　由於通過React.createElement()方法建立的React元素程式碼比較繁瑣，結構不直觀，無法一眼看出描述的結構，不優雅，開發時寫程式碼很不友好。

　　React使用JSX來替代常規的JavaScript，JSX可以理解為的JavaScript語法擴充套件，它裡面的標籤申明要符合XML規範要求。

React不一定非要使用JSX，但它有以下優點：
- JSX執行更快，因為它在編譯為JavaScript程式碼後進行了優化
- 它是型別安全的，在編譯過程中就能發現錯誤
- 宣告式語法更加直觀，與HTML結構相同，降低了學習成本，提升開發效率速度
JSX語法：
- 定義虛擬DOM時，不要用引號
- 標籤中混入js表示式時要用{}
- 樣式的類名指定不要用class，要用className
- 內聯樣式，要用style={{key: value}}的形式去寫
- 只有一個根標籤
- 標籤必須閉合
- 標籤首字母：
  - 小寫字母開頭，則會將標籤轉為html中同名標籤，若html標籤中無對應的同名元素，編譯會報錯
  - 大寫字母開頭，react就去渲染對應的元件，若元件沒有定義，則報錯

開始本文正文，下面看下React中的JSX { }的使用，具體內容如下所示：

在做react開發的時候，我們知道最後要通過render方法來將React元素掛載到真實的DOM上。而建立一個React元素，可以通過兩種方式建立。
（1）通過JSX方式
（2）通過React.createElement()方法建立

而JSX的方式，最終也會被babel轉換，變成通過React.createElement()方法進行建立。
之所以這樣子，是因為JSX能夠很大程度的方便開發，可以少寫很多程式碼。

而本篇文章就是講解一下如何在React中使用JSX。

1.在JSX中使用{ }

例如當我們通過JSX建立一個React元素：

let a = 1
const div = <div></div>

而在這個div中想使用變數a，我們就可以通過{}來對變數進行引入。

（1）引入變數

const div = <div>{a}</div> //變數

當然，除了引入變數這種，還有很多中方式可以在{}中進行編寫。

（2）引入物件屬性

    let empty = {
      a: 1,
      b: 2
    }
    const div = <div>{empty.a}</div> //物件屬性

（3）引入計算表示式

    const div = <div>{empty.a + empty.b}</div> //計算表示式

（4）引入函數

    const fn = ()=>{
      return 2
    }
    const div = <div>{fn()}</div> //函數

（5）引入邏輯表示式

    const div = <div>{fn() === 2 ? 1 : 2}</div> //邏輯表示式

（6）引入陣列

    const div = <div>{[1,2,3,4,5]}</div> //陣列

OK，除了上面寫在大括號裡的，還有幾種資料型別沒有引入。這裡需要注意，大括號裡雖然可以解析陣列，但是不能解析物件（有一種特例後面會說）。

如果在大括號裡面放入了物件，那麼React就會報錯。
同樣的，如果在大括號裡的是一個方法，也會報錯（也有一種特例）。

如果在{}裡面，引入了布林型別，undefined，null這三種資料型別。React雖然不會報錯，但是並不會渲染到真實DOM上。

2.在JSX中巢狀標籤

在正常的HTML裡面，標籤是可以任意巢狀的。如果在React中，可以看下面的程式碼：

    class Em extends React.Component {
      render(){
        return <div></div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

通過上面的方式，是沒辦法實現出想要的效果的。因為它不符合JSX的使用規範，對於Em元件，是沒有收到p標籤的，所以也不會對它進行展示。
正確寫法如下：

    class Em extends React.Component {
      render(){
        return <div>{this.props.children}</div>
      }
    }

    const div = (<div>
      <Em>
        <p>123</p>
      </Em>
    </div>)

這種方式，主要是通過props.children拿到了P標籤，並且在Em元件裡面渲染。

說到這裡，可以說一下另一個用到{}的地方，當我們給React元件繫結屬性的時候，可以通過…的方式：

    let props = { a:1,b:2}
    const div = <div {...props}>123</div>

請記住，這裡的{…props}和Es6的解構並不是一回事！

也就是這種寫法只能出現在JSX裡面，不能在HTML裡面這麼寫。因為在這裡babel已經對它進行了處理所以才可以這麼寫。

3.{}中的樣式和事件處理

剛才說{}裡面不應該有物件和函數，但是有個別的特例，就是style樣式，和事件處理。

在JSX中給標籤新增樣式是這麼寫的：

    const div = <div style={{fontSize:'14px',aaa:'2'}}></div>

也就是{}裡面的，是該標籤的樣式物件。值得注意的是裡面的key都是用小駝峰命名的。而且必須有效，不然是無法渲染到真實DOM的標籤上的。

在JSX中給標籤新增事件是這麼寫的：

    const div = <div onClick={() => {console.log(123)}}>123</div>

同樣，事件名也是小駝峰式命名的。

4.在JSX中使用語句

在jsx中是可以通過語句來對React元素進行處理的。例如

條件判斷語句：

    let div = [<div>123</div>];
    if(1+1 === 2){
      div.push(<div>true</div>)
    }else{
      div.push(<div>false</div>)
    }

迴圈語句：

    let div = [1,2,3,4,5].map((item,index) => {
      return <li key={index}>{item}</li>
    })

關於JSX的一些使用就先說這麼多，後續有新內容會繼續補充。

到此這篇關於React中的JSX { }的使用的文章就介紹到這了,更多相關React JSX使用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！