React中的JSX{?}怎么使用

本篇內容介紹了“React中的JSX{ }怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

而JSX的方式，最終也會被babel轉換，變成通過React.createElement()方法進行創建。
之所以這樣子，是因為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>
    })

“React中的JSX{ }怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！