本章內(nèi)容
上一節(jié)內(nèi)容我們完成了一個(gè)簡(jiǎn)單的TodoList案例。到現(xiàn)在為止我們已經(jīng)知道怎么在 JSX中使用 “js 表達(dá)式”和”列表渲染“了，本節(jié)我們繼續(xù)使用之前的工程項(xiàng)目來編寫代碼，補(bǔ)充在 React使用 JSX語法的一些細(xì)節(jié)。
1、js 表達(dá)式
-
JSX中使用表達(dá)式：{ JS 表達(dá)式 } - 可使用的
js表達(dá)式有：
字符串、數(shù)值、布爾值、null、undefined、數(shù)組、對(duì)象
函數(shù): add(1, 2)
js運(yùn)算: 1+2、'abc'.split('') 等
...
- 注意：
if..else、switch..case等是js語句，不是表達(dá)式，不能出現(xiàn)在{}中
// App.js 文件中，注釋之前的代碼，換成以下代碼，運(yùn)行并打開瀏覽器觀察顯示結(jié)果
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
this.obj = {name: 'bob', age: 12}
}
// 加法
add(a, b) {
return a+b
}
// 減法
minus (a, b) {
return a-b
}
render() {
return (
<div className="App">
<p>字符串： { 'str' }</p>
<p>數(shù)值： { 111 }</p>
<p>布爾值： { true ? 'true': 'false' }</p>
<p>null： { null }</p>
<p>undefined： { undefined }</p>
<p>數(shù)組： { [1, 2, 3, 4] }</p>
<p>對(duì)象： { this.obj.name} - {this.obj.age }</p>
<p>函數(shù)：{ this.add(1, 2)}, {this.minus(10, 1)}</p>
<p>計(jì)算： { 1+3333 }</p>
</div>
)
}
}
export default App
2、列表渲染
- 在
TodoList案例中，我們已經(jīng)了解到列表的渲染可以使用map實(shí)現(xiàn)。 - 渲染過程中需要指定
key, 這是React內(nèi)部用于性能優(yōu)化的，我們后面會(huì)詳細(xì)講一下.
// App.js 文件中，注釋之前的代碼，換成以下代碼，運(yùn)行并打開瀏覽器觀察顯示結(jié)果
import React, { Component } from 'react'
class App extends Component {
constructor (props) {
super(props)
this.userList = [
{ name: 'bob', age: 22 },
{ name: 'liii', age: 18 },
{ name: 'mary', age: 19 },
{ name: 'tom', age: 31 }
]
this.lower20List = this.userList.filter(item => item.age < 20)
}
render() {
return (
<div className="App">
<p>展示用戶列表數(shù)據(jù)：</p>
<ul>
{
this.userList.map((item, index) => <li>{item.name} --- {item.age}</li>)
}
</ul>
<p>展示20歲以下的用戶數(shù)據(jù)</p>
<ul>
{
this.lower20List.map((item, index) => <li key={index}>{item.name} --- {item.age}</li>)
}
</ul>
</div>
)
}
}
export default App
3、條件渲染
官網(wǎng)這里詳細(xì)介紹了在 JSX中如何進(jìn)行條件渲染。具體的方式有：
- 使用
if表達(dá)式語句、switch語句 - 使用三目運(yùn)算
（ condition ? a : b） - 使用
{ condition && a }或者{condtion || a}
// App.js 文件中，注釋之前的代碼，換成以下代碼，運(yùn)行并打開瀏覽器觀察顯示結(jié)果
import React, { Component } from 'react'
function ShowScoreMessage(props){ // 注意組件函數(shù)的命名需要使用大駝峰方式
if (props.score < 60) {
return (
<div>
<p>你的分?jǐn)?shù)是： {props.score}</p>
<div>不及格?。?！</div>
</div>
)
} else {
return (
<div>
<p>你的分?jǐn)?shù)是： {props.score}</p>
<div>及格！?。?span id="n5n3t3z" class="token operator"></div>
</div>
)
}
}
class App extends Component {
contructor() {
this.sex = 'male' // 1.1 定義一個(gè)性別的變量
this.score = 99 // 2.1 定義一個(gè)score,根據(jù) score 顯示不同的提示組件
this.isEdit = true // 3.1 定義一個(gè)isEidt 變量，用于表示當(dāng)前是否是編輯狀態(tài)
}
render() {
return (
<div>
{/* 1.2 使用三目運(yùn)算進(jìn)行條件渲染 */}
{this.sex==='male' ? ' 我是一個(gè)男孩': '我是一個(gè)女孩'}
{ false ? <span>this is span</span> : null}
{/* 2.2 使用 if 語句進(jìn)行條件渲染 */}
<ShowScoreMessage score={this.score}></ShowScoreMessage>
{/* 3.2 使用 && 運(yùn)算符顯示數(shù)據(jù) */}
{ this.isEdit && '現(xiàn)在是編輯狀態(tài)'}
</div>
)
}
}
export default App
4、className
-
在傳統(tǒng)的前端編程中，如果想給一個(gè)
HTML元素添加類名，只需要給其class屬性進(jìn)行賦值即可 -
但是在
React的JSX語法里，如果想給一個(gè)HTML元素賦值類名，必須使用className。如果使用class關(guān)鍵字，React 會(huì)認(rèn)為它是 E6中的類。為了避免歧義，React建議我們將HTML屬性class改寫成className. -
當(dāng)然了，如果你硬要使用
class來添加類名，確實(shí)能生效，但是仔細(xì)觀察會(huì)發(fā)現(xiàn)瀏覽器的控制臺(tái)會(huì)有個(gè)錯(cuò)誤警告
/* App.css 文件*/
.p1 {
color: #f00;
}
.p2 {
color: aqua;
}
// App.js 文件中，注釋之前的代碼，換成以下代碼，運(yùn)行并打開瀏覽器觀察顯示結(jié)果
import React, { Component } from 'react'
import './App.css'
class App extends Component {
render() {
return (
<div>
{/* 你會(huì)發(fā)現(xiàn)使用 class 也生效，就是控制臺(tái)會(huì)出現(xiàn)錯(cuò)誤警告 */}
<p class="p1">這是一個(gè)class 為 p1 的 p元素</p>
{/* 建議使用 className 來賦值類名 */}
<p className="p2">這是一個(gè)class 為 p2 的 p元素</p>
{/* 如果的類名是動(dòng)態(tài)的，仍然可以結(jié)合jsx 的表達(dá)式+條件渲染 */}
<p className={false ? 'p1' : ''}>這個(gè)p元素的類名是動(dòng)態(tài)的</p>
</div>
)
}
}
export default App
5、jsx 中的樣式處理
React中的樣式處理，一般有三種方式：
- 第一種方式是直接行內(nèi)樣式綁定
- 第二種是將樣式提取到一個(gè)變量中，再將變量綁定到
style屬性上（常用） - 第三種是動(dòng)態(tài)控制類名，不同類名里定義不同的樣式
/* App.css 文件*/
.p1 {
color: #f00;
}
.p2 {
color: aqua;
}
import React, { Component } from 'react'
import './App.css'
class App extends Component {
constructor(props) {
super(props)
this.styleObj = {
color: '#f00',
fontSize: '16px'
}
this.isP1 = false
}
render() {
return (
<div>
{/* 1、行內(nèi)樣式 */}
<p style={{color: '#0f0', border: '1px solid #ccc'}}>字體綠色,邊框1px</p>
{/* 2、將樣式提取到一個(gè)變量中，然后賦值變量到 style 屬性上 */}
<p style={this.styleObj}>字體紅色, 字號(hào)16px</p>
{/* 3、使用動(dòng)態(tài)類名來控制樣式 */}
<p className={this.isP1 ? 'p1': 'p2'}>類名為p2的樣式</p>
</div>
)
}
}
export default App
6、dangeouslySetInnerHTML
-
到現(xiàn)在為止，我們知道在
JSX中如果要渲染一個(gè)常規(guī)的字符串，可以將字符串賦值一個(gè)變量，然后直接使用{}進(jìn)行渲染。 -
那現(xiàn)在假設(shè)一下，如果這個(gè)字符變量里存儲(chǔ)的不是普通的字符串，而是一段
HTML，那要怎么才能正確顯示這段HTML呢？ -
現(xiàn)在我們來實(shí)現(xiàn)一個(gè)需求：有個(gè)字符變量，內(nèi)容為
<h1>這是一個(gè) h1 標(biāo)簽</h1>, 希望在頁面顯示的結(jié)果是“一級(jí)標(biāo)題”樣式的 ”這是一個(gè) h1 標(biāo)簽“，而不是<h1> 這是一個(gè) h1 標(biāo)簽</h1> -
React中提供了dangeouslySetInnerHTML屬性，允許將HTML插入到組件中。相當(dāng)于js的innerHTML。dangeouslySetInnerHTML在使用時(shí)必須傳遞一個(gè)對(duì)象，該對(duì)象具有一個(gè)名為__html的屬性，該屬性包含您要插入到組件中的HTML字符串 -
但要注意的是，就如同它的命名一樣。它是危險(xiǎn)的，由于不會(huì)轉(zhuǎn)義，就意味著存在
XSS攻擊或者其他安全問題
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
this.str = '<h1>這是一個(gè) h1 標(biāo)簽</h1>'
}
render() {
return (
<div>
{/* 直接渲染，你會(huì)發(fā)現(xiàn)界面顯示的是： <h1>這是一個(gè) h1 標(biāo)簽</h1> */}
{this.str}
{/* 在 React 中可以使用 dangerouslySetInnerHTML 來實(shí)現(xiàn)直接將 HTML 插入到組件中 */}
<p dangerouslySetInnerHTML={{__html: this.str}}></p>
</div>
)
}
}
export default App
7、htmlFor
- 需求：有個(gè)可以輸入姓名的輸入框，要求點(diǎn)擊”姓名“時(shí)，
input框也可以獲得焦點(diǎn) - 傳統(tǒng)的做法是，使用
label元素包裹 ”姓名“，然后其for屬性綁定input的id屬性，這樣就可實(shí)現(xiàn)點(diǎn)擊"姓名"后input框獲得焦點(diǎn) - 如果我們直接按照傳統(tǒng)方式在
React中寫，會(huì)發(fā)現(xiàn)效果雖然實(shí)現(xiàn)了，但是控制臺(tái)會(huì)有個(gè)錯(cuò)誤警告 - 在
React如果你要使用label的for，那么要將for改寫成htmlFor
<label for="username">姓名</label>
<input id="username" value="bob" name="username" type="text" />
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div>
{/* 功能實(shí)現(xiàn)了，但是控制臺(tái)會(huì)出現(xiàn)一個(gè)錯(cuò)誤警告 */}
<label for="username">姓名: </label>
<input id="username" value="bob" name="username" type="text" />
{/* 在 React 如果你要使用 label的 for ，那么要將 for 改寫成 htmlFor */}
<label htmlFor="username">姓名: </label>
<input id="username" value="bob" name="username" type="text" />
</div>
)
}
}
export default App
文章來源：http://www.zghlxwxcb.cn/news/detail-797135.html
8、使用 jsx 的注意事項(xiàng)
-
JSX必須有一個(gè)根節(jié)點(diǎn)，如果沒有根節(jié)點(diǎn)則使用<></>（幽靈節(jié)點(diǎn)）或者Fragment代替根節(jié)點(diǎn) - 所有標(biāo)簽必須形成閉合，雙標(biāo)簽閉合或者單標(biāo)簽閉合都可
-
JSX語法更貼近js語法，屬性名采用駝峰命名法，例：className,htmlFor -
JSX支持多行（換行），如需換行，可使用（）包裹
到此，本章內(nèi)容結(jié)束！文章來源地址http://www.zghlxwxcb.cn/news/detail-797135.html
到了這里，關(guān)于React入門 - 07(說一說 JSX 中的語法細(xì)節(jié))的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
