运用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 && (
)
);
}
}
首先封装一个组件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 (
);
}
}
下面做一个小小的扩展
通过自定义一个name去选择不同节点插入组价不同地方
index.js修改标签里面的节点
在组件的引用有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筛选出指定自定义属性的名称来放入到子组件中
结束，如果对你有帮助希望各位小哥哥可以点赞噢！
!
{!closeable && (
)}
{ onCancel && onCancel(e);}}>×
)}
{this.props.children}
{!buttonable && (
{!cancelable && (
{ onCancel && onCancel(e); }}>{closeName || '取消'}
)}
{ onOk && onOk(e); }}>{okName || '确认'}
Hello World!
Hello World!
Hello World!
发表评论 (审核通过后显示评论)：