React-插槽

react插槽

作用

让子组件的一部分内容，被父组件控制，而不是被子组件控制，用于将父级的内容（数据）显示到子级

//父级
import React, { Component } from 'react'
import Son from './Son'//引入子级

export default class Far extends Component {
    render() {
        return (
            <div>
            {/* 在子级标签里写内容 */}
                <Son>
                    <h1>插槽：这是父级定义的内容（数据），放在子级显示</h1>
                </Son>
            </div>
        )
    }
}
//子级
import React, { Component } from 'react'

export default class Son extends Component {
    render() {
        return (
            <div>
             <p>这是子级</p>

             {/* 这是子级显示父级的内容 ，通过props.children属性上获取*/}
             {this.props.children}
             
            </div>
        )
    }
}

效果图