react,单实例登陆框,可以通过SingleGitLogin.show()进行调用。
但是为什么是单实例,其实我并不是非常清楚,如果大神能够解释就好了。
import GitLogInfo from '@/components/GitLogInfo/GitLogInfo' import SingleDemo from './SingleDemo'; import React from 'react'; import { Modal, Radio, Alert } from 'antd' import RadioGroup from 'antd/lib/radio/group'; import ReactDOM from 'react-dom' import { LoginModal } from '@/components/ProjSpace/ModalComponents/SingleDemo' import Pubsub from 'pubsub-js' let index = 0; let div; function domRender(reactElem, node) { //let div; console.log(index++, "this is domRender", div); if (node) { div = typeof node === 'string' ? window.document.getElementById(node) : node; } else { div = window.document.createElement('div'); window.document.body.appendChild(div); } return ReactDOM.render(reactElem, div); } //function destroyRender(reactElem, node) export class SingleLogin extends React.Component { constructor(props) { super(props); this.state = { visible: false, onOk: this.handleOk, onCancel: this.handleCancel, } } componentWillUnmount() { console.log("this is will Unmount"); } handleOk = (data1, data2) => { this.close(); console.log(data1, data2); Pubsub.publish('loginInfo', data2); } handleCancel = () => { this.close(); } init = (onOk, onCancel, visible) => { // LoginModal.render({ visible, onOk, onCancel }); this.setState({ onCancel, onOk, visible }) } show = (callback) => { // console.log("props from callback", callback) this.setState({ visible: true }); Pubsub.subscribe('loginInfo', (msg, data) => { if (callback && callback instanceof Function) { console.log(callback, "in this call backs"); callback(data); Pubsub.unsubscribe('loginInfo'); return; } }) } close = () => { this.setState({ visible: false }); // LoginModal.render(this.state); } render() { console.log("正在render") return <GitLogInfo {...this.state}></GitLogInfo> } } export const SingleGitLogin = domRender(<SingleLogin />)
文章来源: https://blog.csdn.net/qq_32734639/article/details/91887997