手摸手写一个Modal插件

首先封装一个组件modal,其中各个参数的作用在上面都进行了解析

image

主角组件

modal.js

import { Fragment, Component } from 'react';
import c from './index.less';

/*
 * @visible {Boolean} 是否展示
 * @closeName {String} 取消键名字
 * @okName {String} 确认键名字
 * @buttonable {Boolean} 底部按钮是否隐藏
 * @cancelable {Boolean} 取消按钮是否隐藏
 * @closeable {Boolean} x按钮是否隐藏
 * @onOk {Function} 确认键回调函数
 * @onCancel {Function} 取消键和x按钮回调函数
 */
export default class Modal extends Component {
  constructor() {
    //继承React.Component
    super();
    this.state = {};
  }

  render() {
    const { closeName, okName, buttonable, closeable, cancelable, onOk, onCancel, visible } = this.props;
    return (
        visible && (
          <div className={c.index}>
            <div className={c.window}>
              {!closeable && (
                <div className={c.close} onClick={e => { onCancel && onCancel(e);}}>×</div>
              )}
              <div className={c.content}>{this.props.children}</div>
              {!buttonable && (
                <div className={c.footerBtn}>
                  <div className={c.btns}>
                    {!cancelable && (
                      <div className={c.cancle} onClick={e => { onCancel && onCancel(e); }}>{closeName || '取消'}</div>
                    )}
                    <div className={c.ok} onClick={e => { onOk && onOk(e); }}>{okName || '确认'}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        )
    );
  }
}

首先封装一个组件modal，以下放一下样式代码，大家可以根据自己需要修改。
index.less

.index{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .content{
    overflow: hidden;
  }
  .window{
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    width: 534px;
    min-height: 300px;
    background-color: #fff;
    border-radius:15px;
    .close{
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 50px;
      color: #bbbbbb;
    }
    .footerBtn{
      padding-top: 100px;
      .btns{
        font-size: 30px;
        position: absolute;
        display: flex;
        width: 100%;
        height: 100px;
        line-height: 100px;
        bottom: 0;
        border-top: 1px solid #eeeeee;
        >div{
          flex: 1;
          text-align: center;
          border-left: 1px solid #eeeeee;
          &:first-child{
            border-left: none;
          }
        }
      }
    }
  }
}

如何运用组件？

先引入modal.js直接写入<modal>标签，里面的内容直接写入自己定义的样式就可以了
index.js

import Modal from '../Modal';

export default class GetCheck extends Component {
  constructor() {
    super();
    this.state = {
      show: true,
    };
  }
  close = e => {
      this.setState({show : !this.state.show})
  }
  render() {
    return (
      <Modal visible={this.state.show} buttonable={true} onCancel={this.close}>
        <div className={c.title}>Hello World!</div>
      </Modal>
    );
  }
}

下面做一个小小的扩展

通过自定义一个name去选择不同节点插入组价不同地方
index.js修改标签里面的节点

<Modal visible={this.state.show} buttonable={false} onCancel={this.close}>
     <div name="first">Hello World!</div>
     <div name="second">Hello World!</div>
 </Modal>

在组件的引用有3种方法，子组件一定要使用this.props.children才能使用
如在Modal.js里面运用

{this.props.children}//这是一个数组 会直接把三个div直接显示在子组件中
{this.props.children[0]}//只是把这个children数组第一个元素放到子组件中
{this.props.children.filter(itme => itme.props.name=="first")}//这是通过filter筛选出指定自定义属性的名称来放入到子组件中

结束，如果对你有帮助希望各位小哥哥可以点赞噢！
!