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

Near_Li 發布于2019-08-21 17:33 / 1951人閱讀

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

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

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

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

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

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

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

必須要用一個外層元素把內容進行包裹：

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

表達式插入

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

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

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

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

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

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

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

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

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

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

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

條件返回

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

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

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

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

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

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

條件返回 JSX 的方式在 React.js 中很常見，組件的呈現方式隨著數據的變化而不一樣，你可以利用 JSX 這種靈活的方式隨時組合構建不同的頁面結構。

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

JSX 元素變量

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

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

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

再舉一個例子：

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

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89667.html

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

摘要：上面的代碼小書經過編譯以后會變成小書會構建一個對象里描述你結構的信息，包括標簽名屬性還有子元素等。第二個原因是，有了這樣一個對象。負責把這個用來描述信息的對象變成元素，并且渲染到面上。下一節中我們將介紹小書組件的方法。 React.js 小書 Lesson6 - 使用 JSX 描述 UI 信息本文作者：胡子大哈本文原文：http://huziketang.com/books/rea...

ChanceWong 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）

摘要：我們把將組件渲染，并且構造元素然后塞入頁面的過程稱為組件的掛載這個定義請好好記住。掛載的時候，會在組件的之前調用，在元素塞入頁面以后調用。下一節中我們將介紹小書掛載階段的組件生命周期二。 React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson18 轉載請注...

pf_miles 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹

摘要：小書最后頁面會顯示內容組件可以和組件組合在一起，組件內部可以使用別的組件。當頁面結構復雜起來，有許多不同的組件嵌套組合的話，組件樹會相當的復雜和龐大。下一節中我們將介紹小書事件監聽。 React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 轉載請注明出處，保留...

AbnerMing 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態上面的結構和內容行為，組件的顯示形態和行為可以由數據狀態和配置參數共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節鏈接直達小書基本環境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 評論0 收藏0
React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作

摘要：一個組件的顯示形態由多個狀態決定的情況非常常見。我們順利地消除了手動的操作。非一般的暴力，因為每次都重新構造新增刪除元素，會導致瀏覽器進行大量的重排，嚴重影響性能。下一節小書前端組件化三抽象出公共組件類我們把這個通用模式抽離到一個類當中。 React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 評論0 收藏0