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使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!