序:刚看到这个题的时候但是当时我没太理解时什么意思,后来想清楚了其实也不是很难。
问题核心:在任何地方都可以直接调用,调方法就可以展示。既然时调用方法就能直接展示出来的,那就说明render操作和挂到html上的dom在方法里直接就完成了。那就明白了,就是写一个简单的模态对话框的实现。
代码实现例子🌰
import ReactDOM from 'react-dom';
var ModelDialog = function () {};
ModelDialog.prototype.show = function () {
let dom = document.createElement('div');
ReactDOM.render( < div > Hello World< /div> , dom);
document.body.appendChild(dom);
}
export default ModelDialog;
调用方法:new ModelDialog().show();
例子2🌰
import ReactDOM from 'react-dom';
class ModelDialog {
static show() {
let dom = window.document.createElement('div');
ReactDOM.render( < div > Hello World < /div>, dom);
window.document.body.appendChild(dom);
}
}
export default ModelDialog;
调用就直接ModelDialog.show();
以上是我实现的方式,如果大家有更好的实现方式也欢迎留言