基于組件開發(fā)，我們經(jīng)常在各個(gè)組件之間形成嵌套關(guān)系。

例如，我們有Parent、A、B三個(gè)組件，想要使parent和A形成父子組件關(guān)系，A和B形成父子組件關(guān)系。

在之前我們經(jīng)常這樣做：
將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>
      )
    }
  }

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

但是，我們發(fā)現(xiàn)B組件并沒有被渲染，這是因?yàn)椋诮M件標(biāo)簽中間寫的內(nèi)容作為prop傳值傳給組件A，屬性名稱為children.在渲染時(shí)需要在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>
      )
    }
  }