写一个React实现的直接调方法可展示的组件

266 阅读1分钟

序:刚看到这个题的时候但是当时我没太理解时什么意思,后来想清楚了其实也不是很难。

问题核心:在任何地方都可以直接调用,调方法就可以展示。既然时调用方法就能直接展示出来的,那就说明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();

以上是我实现的方式,如果大家有更好的实现方式也欢迎留言