react全局的公共组件-------弹框（Alert）
最近研究react，发现写⼀个组件很容易，但是要写⼀个全局的好像有点⿇烦。不能像VUE⼀样，直接在原型上⾯扩展，注册全局组件下⾯实现⼀个弹框，只需要引⼊之后，直接调⽤⽅法即可，不需要写⼊组件
给出我写react全局组件的思路。
创建⼀个 div加⼊到body，⽤这个div当容器，渲染react组件，然后由改变组件的 state来控制弹框的显⽰隐藏
代码结构如下：
效果图如下：
alert.jsx
import React, { Component } from 'react';
import { is, fromJS } from 'immutable';
import ReactDOM from 'react-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './alert.css';
let defaultState = {
alertStatus:false,
alertTip:"提⽰",
closeAlert:function(){}
}
class Alert extends Component{
state = {
...defaultState
};
// css动画组件设置为⽬标组件
FirstChild = props => {
const childrenArray = Array(props.children);
return childrenArray[0] || null;
}
// 关闭弹框
confirm = () => {
this.setState({
alertStatus:false
})
this.state.closeAlert();
}
open =(options)=>{
options = options || {};
options.alertStatus = true;
this.setState({
...defaultState,
...options
})
}
close(){
this.state.closeAlert();
this.setState({
...defaultState
})
}
shouldComponentUpdate(nextProps, nextState){
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
}
render(){
return (
<ReactCSSTransitionGroup
component={this.FirstChild}
transitionName='hide'
transitionEnterTimeout={300}
transitionLeaveTimeout={300}>
<div className="alert-con" style={this.state.alertStatus? {display:'block'}:{display:'none'}}>
<div className="alert-context">
<div className="alert-content-detail">{this.state.alertTip}</div>
<div className="comfirm" onClick={firm}>确认</div>
</ReactCSSTransitionGroup>
);
}
}
let div = ateElement('div');
let props = {
};
document.body.appendChild(div);
let Box = ateElement(  Alert,
props
),div);
export default Box;
alert.css
.alert-con {
react组件之间通信
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 11;
}
.alert-context {
background-color: #fff;
border-radius: 16px;
height: 200px;
width: 80%;
margin: 40% auto 0;
}
.alert-context .alert-content-detail {
text-align: center;
color: #333;
font-size: 24px;
height: 150px;
line-height: 150px;
}
.
alert-context firm {
border-top: 1PX solid #eee;
box-sizing: border-box;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #666;
}
.alert-enter {
opacity: 0;
}
.alert-enter.alert-enter-active {
transition: all 300ms;
opacity: 1;
}
.alert-leave {
opacity: 1;
}
.alert-leave.alert-leave-active {
transition: all 300ms;
opacity: 0;
}
使⽤⽅式：
import React, { Component } from 'react';
import Alert from "../components/alert/alert.jsx"; class Two extends Component {
constructor(props){
num:1
};
}
open=()=>{
Alert.open({
alertTip:"这是⼀个测试弹框",
closeAlert:function(){
console.log("关闭了...");
}
});
}
render() {
return (
<div className="Two">
Two
<button onClick={this.open}>
开启宝藏
</button>
<div>{this.state.num}</div>
</div>
);
}
}
export default Two;
上⾯直接引⼊ alert.jsx之后，调⽤ open函数即可
这样的好处，解决了弹框的层级问题，使⽤更加⽅便快捷

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。