react中的children使用方法

Posted 2021-01-15 wyangnb

使用过vue的小伙伴都知道vue中有个slot，也就是插槽，作用就是占位，那么再react中可以使用children来替代
父组件

render(){
    return( 
        <div>
            <Grid>
                我将被传递到Grid组件中
            </Grid>
        </div>
    )
}

子组件

export default class Grid extends React.Component {
    render() {
      return (
        <div>{this.props.children}</div>
      )
    }
}

这样就能够够实现slot的功能了。