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

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

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

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

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

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

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

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

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

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

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

表達式插入

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

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

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

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

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

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

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

這樣就可以為 div 標簽添加一個叫 header 的類名。

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

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

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

條件返回

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

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

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

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

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

這樣就相當于在 isGoodWord 為 true 的時候顯示 is good，否則就隱藏。

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

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

JSX 元素變量

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

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

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

再舉一個例子：

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

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

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

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

GPU云服務器云服務器 React.js react.js cdn 小書 Rendering

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89667.html

發(fā)表評論

登陸后可評論

0條評論

Near_Li

男|高級講師

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

TA的文章

buyvm，流媒體優(yōu)化vps簡單測評 – 線路走的he和telia

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

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

閱讀 2369·2019-08-30 13:05
CSS學習（二）

閱讀 1212·2019-08-29 15:29
給自己定個小目標比如14天入門JavaScript

閱讀 2889·2019-08-29 11:31
細說es6中的數(shù)組

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yō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ā)表評論

0條評論

Near_Li

男|高級講師

TA的文章

buyvm，流媒體優(yōu)化vps簡單測評 – 線路走的he和telia

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

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

CSS學習（二）

給自己定個小目標比如14天入門JavaScript

細說es6中的數(shù)組

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

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

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yō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)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！