React.js 小書 Lesson7 - 組件的 render 方法

Near_Li 發(fā)布于2019-08-21 17:33 / 1947人閱讀

摘要：一個(gè)組件類必須要實(shí)現(xiàn)一個(gè)方法，這個(gè)方法必須要返回一個(gè)元素。你也可以把它改成，它就會(huì)顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的。現(xiàn)在頁(yè)面上是顯示小書。下一節(jié)中我們將介紹小書組件的組合嵌套和組件樹。

React.js 小書 Lesson7 - 組件的 render 方法

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson7

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

React.js 中一切皆組件，用 React.js 寫的其實(shí)就是 React.js 組件。我們?cè)诰帉?React.js 組件的時(shí)候，一般都需要繼承 React.js 的 Component（還有別的編寫組件的方式我們后續(xù)會(huì)提到）。一個(gè)組件類必須要實(shí)現(xiàn)一個(gè) render 方法，這個(gè) render 方法必須要返回一個(gè) JSX 元素。但這里要注意的是，必須要用一個(gè)外層的 JSX 元素把所有內(nèi)容包裹起來(lái)。返回并列多個(gè) JSX 元素是不合法的，下面是錯(cuò)誤的做法：

...
render () {
  return (
    第一個(gè)
    第二個(gè)
  )
}
...

必須要用一個(gè)外層元素把內(nèi)容進(jìn)行包裹：

...
render () {
  return (
    
      第一個(gè)
      第二個(gè)
    
  )
}
...

表達(dá)式插入

在 JSX 當(dāng)中你可以插入 JavaScript 的表達(dá)式，表達(dá)式返回的結(jié)果會(huì)相應(yīng)地渲染到頁(yè)面上。表達(dá)式用 {} 包裹。例如：

...
render () {
  const word = "is good"
  return (
    
      React 小書 {word}
    
  )
}
...

頁(yè)面上就顯示“React 小書 is good”。你也可以把它改成 {1 + 2}，它就會(huì)顯示 “React 小書 3”。你也可以把它寫成一個(gè)函數(shù)表達(dá)式返回：

...
render () {
  return (
    
      React 小書 {(function () { return "is good"})()}
    
  )
}
...

簡(jiǎn)而言之，{} 內(nèi)可以放任何 JavaScript 的代碼，包括變量、表達(dá)式計(jì)算、函數(shù)執(zhí)行等等。 render 會(huì)把這些代碼返回的內(nèi)容如實(shí)地渲染到頁(yè)面上，非常的靈活。

表達(dá)式插入不僅僅可以用在標(biāo)簽內(nèi)部，也可以用在標(biāo)簽的屬性上，例如：

...
render () {
  const className = "header"
  return (
    
      React 小書
    
  )
}
...

這樣就可以為 div 標(biāo)簽添加一個(gè)叫 header 的類名。

注意，直接使用 class 在 React.js 的元素上添加類名如

這種方式是不合法的。因?yàn)?class 是 JavaScript 的關(guān)鍵字，所以 React.js 中定義了一種新的方式：className 來(lái)幫助我們給元素添加類名。

還有一個(gè)特例就是 for 屬性，例如 Male，因?yàn)?for 也是 JavaScript 的關(guān)鍵字，所以在 JSX 用 htmlFor 替代，即 Male。而其他的 HTML 屬性例如 style 、data-* 等就可以像普通的 HTML 屬性那樣直接添加上去。

條件返回

{} 上面說(shuō)了，JSX 可以放置任何表達(dá)式內(nèi)容。所以也可以放 JSX，實(shí)際上，我們可以在 render 函數(shù)內(nèi)部根據(jù)不同條件返回不同的 JSX。例如：

...
render () {
  const isGoodWord = true
  return (
    
      
        React 小書
        {isGoodWord
          ?  is good
          :  is not good
        }
      
    
  )
}
...

上面的代碼中定義了一個(gè) isGoodWord 變量為 true，下面有個(gè)用 {} 包含的表達(dá)式，根據(jù) isGoodWord 的不同返回不同的 JSX 內(nèi)容。現(xiàn)在頁(yè)面上是顯示 React 小書 is good。如果你把 isGoodWord 改成 false 然后再看頁(yè)面上就會(huì)顯示 React 小書 is not good。

如果你在表達(dá)式插入里面返回 null ，那么 React.js 會(huì)什么都不顯示，相當(dāng)于忽略了該表達(dá)式插入。結(jié)合條件返回的話，我們就做到顯示或者隱藏某些元素：

...
render () {
  const isGoodWord = true
  return (
    
      
        React 小書
        {isGoodWord
          ?  is good
          : null
        }
      
    
  )
}
...

這樣就相當(dāng)于在 isGoodWord 為 true 的時(shí)候顯示 is good，否則就隱藏。

條件返回 JSX 的方式在 React.js 中很常見，組件的呈現(xiàn)方式隨著數(shù)據(jù)的變化而不一樣，你可以利用 JSX 這種靈活的方式隨時(shí)組合構(gòu)建不同的頁(yè)面結(jié)構(gòu)。

如果這里有些同學(xué)覺得比較難理解的話，可以回想一下，其實(shí) JSX 就是 JavaScript 里面的對(duì)象，轉(zhuǎn)換一下角度，把上面的內(nèi)容翻譯成 JavaScript 對(duì)象的形式，上面的代碼就很好理解了。

JSX 元素變量

同樣的，如果你能理解 JSX 元素就是 JavaScript 對(duì)象。那么你就可以聯(lián)想到，JSX 元素其實(shí)可以像 JavaScript 對(duì)象那樣自由地賦值給變量，或者作為函數(shù)參數(shù)傳遞、或者作為函數(shù)的返回值。

...
render () {
  const isGoodWord = true
  const goodWord =  is good
  const badWord =  is not good
  return (
    
      
        React 小書
        {isGoodWord ? goodWord : badWord}
      
    
  )
}
...

這里給把兩個(gè) JSX 元素賦值給了 goodWord 和 badWord 兩個(gè)變量，然后把它們作為表達(dá)式插入的條件返回值。達(dá)到效果和上面的例子一樣，隨機(jī)返回不同的頁(yè)面效果呈現(xiàn)。

再舉一個(gè)例子：

...
renderGoodWord (goodWord, badWord) {
  const isGoodWord = true
  return isGoodWord ? goodWord : badWord
}

render () {
  return (
    
      
        React 小書
        {this.renderGoodWord(
           is good,
           is not good
        )}
      
    
  )
}
...

這里我們定義了一個(gè) renderGoodWord 函數(shù)，這個(gè)函數(shù)接受兩個(gè) JSX 元素作為參數(shù)，并且隨機(jī)返回其中一個(gè)。在 render 方法中，我們把上面例子的兩個(gè) JSX 元素傳入 renderGoodWord 當(dāng)中，通過(guò)表達(dá)式插入把該函數(shù)返回的 JSX 元素插入到頁(yè)面上。

下一節(jié)中我們將介紹《React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹》。

GPU云服務(wù)器云服務(wù)器 React.js react.js cdn 小書 Rendering

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89667.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Near_Li

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

buyvm，流媒體優(yōu)化vps簡(jiǎn)單測(cè)評(píng) – 線路走的he和telia

閱讀 3456·2021-09-08 10:46
對(duì)“粘連”footer布局的思考和總結(jié)

閱讀 1186·2019-08-30 13:17
瀏覽器渲染的那些事（三）

閱讀 2362·2019-08-30 13:05
CSS學(xué)習(xí)（二）

閱讀 1207·2019-08-29 15:29
給自己定個(gè)小目標(biāo)比如14天入門JavaScript

閱讀 2887·2019-08-29 11:31
細(xì)說(shuō)es6中的數(shù)組

閱讀 539·2019-08-26 12:13
JavaScript實(shí)現(xiàn)類與繼承的方法（全面整理）

閱讀 1535·2019-08-26 11:42
jsweet中英文文檔，java代碼轉(zhuǎn)js代碼

閱讀 1829·2019-08-23 18:37

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React.js 小書 Lesson7 - 組件的 render 方法

React 小書 {word}

React 小書 {(function () { return "is good"})()}

React 小書

React 小書 {isGoodWord ? is good : is not good }

React 小書 {isGoodWord ? is good : null }

React 小書 {isGoodWord ? goodWord : badWord}

React 小書 {this.renderGoodWord( is good, is not good )}

相關(guān)文章

React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息

React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）

React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹

React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

React.js 小書 Lesson3 - 前端組件化（二）：優(yōu)化 DOM 操作

發(fā)表評(píng)論

0條評(píng)論

Near_Li

男|高級(jí)講師

TA的文章

buyvm，流媒體優(yōu)化vps簡(jiǎn)單測(cè)評(píng) – 線路走的he和telia

對(duì)“粘連”footer布局的思考和總結(jié)

瀏覽器渲染的那些事（三）

CSS學(xué)習(xí)（二）

給自己定個(gè)小目標(biāo)比如14天入門JavaScript

細(xì)說(shuō)es6中的數(shù)組

JavaScript實(shí)現(xiàn)類與繼承的方法（全面整理）

jsweet中英文文檔，java代碼轉(zhuǎn)js代碼

最新活動(dòng)