最近研究react,發現寫一個組件很容易,可是要寫一個全局的好像有點麻煩。不能像VUE同樣,直接在原型上面擴展,註冊全局組件css
下面實現一個彈框,只須要引入以後,直接調用方法便可,不須要寫入組件react
給出我寫react全局組件的思路。bash
建立一個 div加入到body,用這個div當容器,渲染react組件,而後由改變組件的 state來控制彈框的顯示隱藏app
代碼結構以下:dom
alter.jsxide
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;複製代碼