运用react插槽，自定义Madal插件

手摸手写一个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 && (

{!closeable && (

{ onCancel && onCancel(e);}}>×

)}

{this.props.children}

{!buttonable && (

{!cancelable && (

{ onCancel && onCancel(e); }}>{closeName || '取消'}

)}

{ onOk && onOk(e); }}>{okName || '确认'}

)}

) ); } } 首先封装一个组件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直接写入标签，里面的内容直接写入自己定义的样式就可以了 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 (

Hello World!

); } } 下面做一个小小的扩展通过自定义一个name去选择不同节点插入组价不同地方 index.js修改标签里面的节点

Hello World!

在组件的引用有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筛选出指定自定义属性的名称来放入到子组件中结束，如果对你有帮助希望各位小哥哥可以点赞噢！ !