React.js 小書 Lesson22 - props.children 和容器類組件

番茄西紅柿發布于2019-08-21 17:34 / 1725人閱讀

摘要：由于會把插入表達式里面數組中的一個個羅列下來顯示。這樣通過這個布局組件，就可以在各個地方高度復用我們的布局。嵌套的結構在組件內部都可以通過獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。下一節中我們將介紹小書和屬性。

React.js 小書 Lesson22 - props.children 和容器類組件

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

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

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

有一類組件，充當了容器的作用，它定義了一種外層結構形式，然后你可以往里面塞任意的內容。這種結構在實際當中非常常見，例如這種帶卡片組件：

組件本身是一個不帶任何內容的方形的容器，我可以在用這個組件的時候給它傳入任意內容：

基于我們目前的知識儲備，可以迅速寫出這樣的代碼：

class Card extends Component {
  render () {
    return (
      
        
          {this.props.content}
        
      
    )
  }
}

ReactDOM.render(
  
      React.js 小書
       開源、免費、專業、簡單
      訂閱：

} />, document.getElementById("root") )

我們通過給 Card 組件傳入一個 content 屬性，這個屬性可以傳入任意的 JSX 結構。然后在 Card 內部會通過 {this.props.content} 把內容渲染到頁面上。

這樣明顯太丑了，如果 Card 除了 content 以外還能傳入其他屬性的話，那么這些 JSX 和其他屬性就會混在一起。很不好維護，如果能像下面的代碼那樣使用 Card 那想必也是極好的：

ReactDOM.render(
  
    React.js 小書
    開源、免費、專業、簡單
    訂閱：
  ,
  document.getElementById("root")
)

如果組件標簽也能像普通的 HTML 標簽那樣編寫內嵌的結構，那么就方便很多了。實際上，React.js 默認就支持這種寫法，所有嵌套在組件中的 JSX 結構都可以在組件內部通過 props.children 獲取到：

class Card extends Component {
  render () {
    return (
      
        
          {this.props.children}
        
      
    )
  }
}

把 props.children 打印出來，你可以看到它其實是個數組：

React.js 就是把我們嵌套的 JSX 元素一個個都放到數組當中，然后通過 props.children 傳給了 Card。

由于 JSX 會把插入表達式里面數組中的 JSX 一個個羅列下來顯示。所以其實就相當于在 Card 中嵌套了什么 JSX 結構，都會顯示在 Card 的類名為 card-content 的 div 元素當中。

這種嵌套的內容成為了 props.children 數組的機制使得我們編寫組件變得非常的靈活，我們甚至可以在組件內部把數組中的 JSX 元素安置在不同的地方：

class Layout extends Component {
  render () {
    return (
      
        
          {this.props.children[0]}
        
        
          {this.props.children[1]}
        
      
    )
  }
}

這是一個兩列布局組件，嵌套的 JSX 的第一個結構會成為側邊欄，第二個結構會成為內容欄，其余的結構都會被忽略。這樣通過這個布局組件，就可以在各個地方高度復用我們的布局。

總結

使用自定義組件的時候，可以在其中嵌套 JSX 結構。嵌套的結構在組件內部都可以通過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。而在實際的 React.js 項目當中，我們幾乎每天都需要用這種方式來編寫組件。

下一節中我們將介紹《React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性》。

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

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

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作

摘要：多余的操作其實是代碼里面的噪音，不利于我們理解和維護。下一節中我們將介紹小書和容器類組件。 React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huziketan...

Gemini 2019-08-21 17:34 評論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 小書 Lesson13 - 渲染列表數據

摘要：一般來說，的值可以直接后臺數據返回的，因為后臺的都是唯一的。下一節中我們將介紹小書實戰分析評論功能一。 React.js 小書 Lesson13 - 渲染列表數據本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson13 轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huziketang.com/books/...

Alan 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson7 - 組件的 render 方法

摘要：一個組件類必須要實現一個方法，這個方法必須要返回一個元素。你也可以把它改成，它就會顯示小書。注意，直接使用在的元素上添加類名如這種方式是不合法的。現在頁面上是顯示小書。下一節中我們將介紹小書組件的組合嵌套和組件樹。 React.js 小書 Lesson7 - 組件的 render 方法本文作者：胡子大哈本文原文：http://huziketang.com/books/react/l...

Near_Li 2019-08-21 17:33 評論0 收藏0