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 />)