React 创建对话框组件

• Z时代
• 2024-01-10
• 分类：综合

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.style.zIndex = zIndex || 999;
        body.appendChild(showDom);
        let close = () => {
            ReactDOM.unmountComponentAtNode(showDom);
            body.removeChild(showDom);
        }
        ReactDOM.render(
            <Component onClose={close} />,
            showDom
        );
    }
}

App.js

import React, { Component } from 'react';
import Dialog from './Dialog';
class DialogInner extends Component {
    handleClose() {
        this.props.onClose();
    }
    render() {
        return (
          <div className="app-pop-inner">
            <button onClick={this.handleClose.bind(this)}>Close</button>
          </div>
        )
    }
}
class App extends Component {
    handleOpen() {
        Dialog.modal(DialogInner, 1);
    }
    render() {
        return (
          <div>
            <button onClick={this.handleOpen.bind(this)}>打开弹框</button>
          </div>
        );
    }
}
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(<App />, 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;} 

以上是 React 创建对话框组件 的全部内容， 来源链接： utcz.com/z/382583.html