react全局的公共組件-------彈框 （Alert）

最近研究react，發現寫一個組件很容易，可是要寫一個全局的好像有點麻煩。不能像VUE同樣，直接在原型上面擴展，註冊全局組件

下面實現一個彈框，只須要引入以後，直接調用方法便可，不須要寫入組件

給出我寫react全局組件的思路。

建立一個 div加入到body，用這個div當容器，渲染react組件，而後由改變組件的 state來控制彈框的顯示隱藏

代碼結構以下：

alter.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 = React.Children.toArray(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={this.confirm}>確認</div>          </div>        </div>      </ReactCSSTransitionGroup>    );  }} let div = document.createElement('div');let props = {   };document.body.appendChild(div); let Box = ReactDOM.render(React.createElement(  Alert,  props),div);   export default Box;複製代碼

alter.css

.alert-con {  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 .comfirm { 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){        super(props);        this.state = {            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;複製代碼