关于React的正确打开方式（四）插槽

React中的插槽

在React中对于插槽的实现，就是当我们在一个组件标签内去插入dom的时候，React会自动将被插入的这段dom挂载在组件的props的children上，然后只需要在子组件内部调用this.props.children，React就会自动将被插入的dom渲染在组件上，而且我们需要知道的是，react会将被插入的dom段作为一个Array类型的数据挂载在组件的props的children上。

父组件

import React, { Component } from 'react'
import Sole from './sole.js'

export default class soleFat extends Component {
    render() {
        return (
            <div>
                <Sole name={'name'}>
                    <div>
                        <h1>H1</h1>
                    </div>
                    <br></br>
                    <h2>H2</h2>
                </Sole>               
            </div>
        )
    }
}

子组件

import React, { Component } from 'react'

export default class sole extends Component {
    render() {
        return (
            <div>
                {this.props.children}           
            </div>
        )
    }
    log=()=>{
        console.log(this.props.children);
    }
}

我们将以上实例的this.props.children输出出来得到：