基于組件開發，我們經常在各個組件之間形成嵌套關系。

例如，我們有Parent、A、B三個組件，想要使parent和A形成父子組件關系，A和B形成父子組件關系。

在之前我們經常這樣做：
將B組件放到A組件中，將A組件放到Parent組件中，顯示、傳值一切正常。

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h3>我是Parent組件</h3>
        <A/>
      </div>
    )
  }
}

class A extends Component {
    render() {
      return (
        <div className='a'>
          <h3>我是A組件</h3>
          <B/>
        </div>
      )
    }
  }

  class B extends Component {
    render() {
      return (
        <div className='b'>
          <h3>我是B組件</h3>
        </div>
      )
    }
  }

但是，我們有時候需要在Parent組件中一氣呵成的嵌套所有的組件，類似于這樣。

但是，我們發現B組件并沒有被渲染，這是因為，在組件標簽中間寫的內容作為prop傳值傳給組件A，屬性名稱為children.在渲染時需要在A組件中渲染出來才能顯示。

import React, { Component } from 'react'
import './index.css'
export default class Parent extends Component {
  render() {
    return (
      <div className='parent'>
        <h3>我是Parent組件</h3>
        <A>
            <B/>
        </A>
      </div>
    )
  }
}

class A extends Component {
    render() {
      return (
        <div className='a'>
          <h3>我是A組件</h3>
          {this.props.children}
        </div>
      )
    }
  }

  class B extends Component {
    render() {
      return (
        <div className='b'>
          <h3>我是B組件</h3>
        </div>
      )
    }
  }