柚子快报激活码778899分享：React 创建对话框组件

柚子快报激活码778899分享：React 创建对话框组件

http://yzkb.51969.com/

Dialog.js:

import React from 'react';

import ReactDOM from 'react-dom';

export default class Dialog {

static modal(Component, zIndex) {

let body = document.body;

let showDom = document.createElement("div");

showDom.classList.add('app-pop');

showDom.id= 'm-pop';

showDom.style.zIndex = zIndex || 999;

body.appendChild(showDom);

let close = () => {

ReactDOM.unmountComponentAtNode(showDom);

body.removeChild(showDom);

}

ReactDOM.render(

,

showDom

);

}

}

App.js

import React, { Component } from 'react';

import Dialog from './Dialog';

class DialogInner extends Component {

componentDidMount() {

document.getElementById('m-pop').addEventListener('click', e => {

if (e.target && e.target.className.indexOf('app-pop-inner') >= 0) {

return;

}

this.props.onClose();

});

}

handleClose() {

this.props.onClose();

}

render() {

return (

)

}

}

class App extends Component {

handleOpen() {

Dialog.modal(DialogInner, 1);

}

render() {

return (

);

}

}

export default App;

index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import './index.css';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));

registerServiceWorker();

index.css:

.app-pop {position: fixed;width: 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}

.app-pop-inner {position:absolute;left:50%;top:50%;width: 328px;height:380px;border-radius: 6px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background: green;}

柚子快报激活码778899分享：React 创建对话框组件

http://yzkb.51969.com/

参考文章