React基础：插槽的使用

前言

这几天一直在想一个问题，对于弹窗之类的组件。能不能进行封装，统一样式，统一弹窗的大小，避免开发人员的不同导致弹窗的风格不统一。
因为react存在类组件（有状态组件），而且创建类组件都有一条下面的语句：

export default class Test extends Component {}

我们创建的组件继承了Component（虽然不知道这个是干嘛的），那么我们可不可以写一个父组件来统一样式，具体业务通过继承父组件再进行开发。
别说官方文档还真有：

官方文档

看完之后，其实全文讲的都是组合，半点继承都没提。然后发现自己进入了一个误区，我们有插槽这个功能，这不就是一种继承吗？我们把具体的业务通过插槽的方式进行组合不久好了。

插槽

无论是函数组件还是类组件，当父组件向子组件传参时都需要用的props这个属性。这里插槽也需要使用props，props里面有个特殊的属性children，通过props.children来声明这个地方放置插槽的内容

示例

//父组件，公共部分
export default class Father extends Component {
    //指定默认属性
    static defaultProps = {
        title: '弹窗标题',
        closeDailog: () => alert('关闭弹窗！')
    }
    constructor(props) {
        super(props)

        this.state = {}
    }
  
  
    render() {
        return (
            <div style={{ width: '200px', height: '200px', border: '1px solid red' }}>
                {/* 标题 */}
                <div style={{ textAlign: 'center' }}>{this.props.title}</div>
                {/* 按钮 */}
                <button onClick={this.props.closeDailog.bind(this)}>关闭</button>
                {/* 具体内容 */}
                <div>
                     {this.props.children}
                </div>
            </div>
        )
    }
}

只加载父组件，效果图如下（有些丑，凑活着看）：

//子组件，具体的逻辑
import React, { Component } from 'react'
import Father from './Father'

export default class Son extends Component {

    //关闭新增弹窗
    closeAdd() {
        alert('清空表单，关闭弹窗1')
    }
    render() {
        return (
            <div>
                <Father title="新增弹窗" closeDailog={this.closeAdd}>
                    <div>
                        我是具体的业务，新增表单
                    </div>
                </Father>
            </div>
        )
    }
}

最终效果：

import './App.css';
import Son from './Son'
function App() {
  return (
    <div className="App-header">
      <p>你好世界</p>
      <Son />
    </div>
  )
}
export default App;