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

番茄西紅柿發(fā)布于2019-08-21 17:34 / 1718人閱讀

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

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

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

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

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

有一類組件，充當(dāng)了容器的作用，它定義了一種外層結(jié)構(gòu)形式，然后你可以往里面塞任意的內(nèi)容。這種結(jié)構(gòu)在實(shí)際當(dāng)中非常常見，例如這種帶卡片組件：

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

基于我們目前的知識(shí)儲(chǔ)備，可以迅速寫出這樣的代碼：

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

ReactDOM.render(
  
      React.js 小書
       開源、免費(fèi)、專業(yè)、簡(jiǎn)單
      訂閱：

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

我們通過給 Card 組件傳入一個(gè) content 屬性，這個(gè)屬性可以傳入任意的 JSX 結(jié)構(gòu)。然后在 Card 內(nèi)部會(huì)通過 {this.props.content} 把內(nèi)容渲染到頁面上。

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

ReactDOM.render(
  
    React.js 小書
    開源、免費(fèi)、專業(yè)、簡(jiǎn)單
    訂閱：
  ,
  document.getElementById("root")
)

如果組件標(biāo)簽也能像普通的 HTML 標(biāo)簽?zāi)菢泳帉憙?nèi)嵌的結(jié)構(gòu)，那么就方便很多了。實(shí)際上，React.js 默認(rèn)就支持這種寫法，所有嵌套在組件中的 JSX 結(jié)構(gòu)都可以在組件內(nèi)部通過 props.children 獲取到：

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

把 props.children 打印出來，你可以看到它其實(shí)是個(gè)數(shù)組：

React.js 就是把我們嵌套的 JSX 元素一個(gè)個(gè)都放到數(shù)組當(dāng)中，然后通過 props.children 傳給了 Card。

由于 JSX 會(huì)把插入表達(dá)式里面數(shù)組中的 JSX 一個(gè)個(gè)羅列下來顯示。所以其實(shí)就相當(dāng)于在 Card 中嵌套了什么 JSX 結(jié)構(gòu)，都會(huì)顯示在 Card 的類名為 card-content 的 div 元素當(dāng)中。

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

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

這是一個(gè)兩列布局組件，嵌套的 JSX 的第一個(gè)結(jié)構(gòu)會(huì)成為側(cè)邊欄，第二個(gè)結(jié)構(gòu)會(huì)成為內(nèi)容欄，其余的結(jié)構(gòu)都會(huì)被忽略。這樣通過這個(gè)布局組件，就可以在各個(gè)地方高度復(fù)用我們的布局。

總結(jié)

使用自定義組件的時(shí)候，可以在其中嵌套 JSX 結(jié)構(gòu)。嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當(dāng)中非常有用。而在實(shí)際的 React.js 項(xiàng)目當(dāng)中，我們幾乎每天都需要用這種方式來編寫組件。

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