|
react 中组件Modal, Dialog 怎么挂载到body上了的？
一些猜想看antd modal的代码如何实现的1. ReactDOM.unstable_renderSubtreeIntoContainer2.ReactDOM.createPortal
Model.confirm，message.info的实现
一些猜想
因为支持组件式写法 ,肯定是React中一些api，把modal，dialog的元素append到body里面的
function UserDefinedComponent {
return (
// React does *not* create a new div. It renders the children into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
this.props.children,
domNode
);
}
Model.confirm，message.info的实现
相关代码如下，只要使用了ReactDOM.render、React.createElement 这两个api
function confirm(config) {
var div = document.createElement('div');
document.body.appendChild(div);
var currentConfig = _extends({}, config, {
close: close,
visible: true
});
function close() {
}
function update(newConfig) {
currentConfig = _extends({}, currentConfig, newConfig);
render(currentConfig);
}
function destroy() {
}
function render(props) {
ReactDOM.render(React.createElement(ConfirmDialog, props), div);
}
render(currentConfig);
destroyFns.push(close);
return {
destroy: close,
update: update
};
}
待补充。。。
|