上一篇文章我們介紹了 React的使用角塑，并在通過了解create-react-app生成的目錄結(jié)構(gòu)后寫了自己的第一個React程序。這一次我們講系統(tǒng)講解一下React的基礎(chǔ)內(nèi)容淘讥。
JSX
const element = <h1>Hello, world!</h1> 這個既不是字符串也不是HTML圃伶，這個就是JSX的語法，注意在使用JSX語法的時候一定要先引入 React蒲列，也就是 import react from 'react'窒朋。
- 嵌入表達(dá)式
在jsx中的表達(dá)式必須要用大括號括起來，這樣react才會解析你的表達(dá)式蝗岖。而且在大括號中我們還可以寫方法調(diào)用侥猩，計算等。const name = 'Jeff'; const el = <h1>Hello, { name }</h1>;function formatName(user) { return user.firstName + ' ' + user.lastName } const user = { firstName: 'Jeff', lastName: 'Wang' } cosnt el = <h1>Hello, { formatName(user) }</h1> - 在for循環(huán)或if判斷中使用JSX
// if 判斷中使用jsx function getGreeting(user) { if (user) { return <h1>Hello, { formatName(user) }!</h1> } else { return <h1>Hello, Stranger.</h1> } } // for 循環(huán)使用 const list = [ { id: 1, title: 'this is news 1' }, { id: 2, title: 'this is news 2' } ] const listEl = list.map((v, i) => ( <li key={v.id}>{v.title}</li> )) // 注意上面箭頭函數(shù)后面我跟了一個 ()抵赢，它等價于 => {return <li key={v.id}>{v.title}</li> }
使用注意點
- jsx中有的html屬性需要大寫欺劳，例如 class需要寫成className，click 需要寫成onClick等铅鲤，并且每一項都是駝峰命名划提，如果你寫成tabindex是不生效的。
- jsx 自動做了防止注入攻擊彩匕，如果你像輸出一個帶html標(biāo)簽的內(nèi)容腔剂，需要寫成如下格式
<h1 dangerouslySetInnerHTML={{__html: 'cc © 2015'}}></h1>這樣就可以完整輸出你的內(nèi)容。 - 標(biāo)簽閉合驼仪，假如你只是一個子元素 可以直接寫成
<InputBox /> - jsx 是一個對象掸犬，js中使用需要利用babel轉(zhuǎn)成js對象，例如：
const element = ( <h1 className="greeting"> Hello, world! </h1> ); // 上面的jsx 等價于 const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); // 也等價于 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
今天我們就學(xué)這么多內(nèi)容绪爸，有什么問題可在留言去留言湾碎，有 不足指出請大家指出。
