【REACT-插槽】

import React, { Component} from 'react'
class Child1 extends Component {
  render() {
    return (
      <div style={{marginBottom:'20px'}}>
        <span>Child1</span>
        {this.props.children}
      </div>
    )
  }
}
class Child2 extends Component {
  render() {
    return (
      <div style={{marginBottom:'20px'}}>
        <span>Child2</span>
        {this.props.children}
        {this.props.children}
        {this.props.children}
      </div>
    )
  }
}
class Child3 extends Component {
  render() {
    return (
      <div>
        <span>Child3</span>
        {this.props.children[2]}
        {this.props.children[1]}
        {this.props.children[0]}
      </div>
    )
  }
}

export default class Father  extends Component {
  render() {
    return (
      <div>
        <Child1>
          <div>111<span>111</span></div>
          <div>222<span>222</span></div>
          <div>333<span>333</span></div>
        </Child1>

        <Child2>
          <div>111<span>111</span></div>
          <div>222<span>222</span></div>
          <div>333<span>333</span></div>
        </Child2>

        <Child3>
          <div>111<span>111</span></div>
          <div>222<span>222</span></div>
          <div>333<span>333</span></div>
        </Child3>
      </div>
    )
  }
}
ReactDOM.render(
  // <React.StrictMode>
    <Father />
  // </React.StrictMode>
  ,document.getElementById('root'))