Model 高阶组件

 

//withModel.tsx

import React, { Component } from "react";
import { Modal } from "antd";

export interface withLoadingProps {
    isLoading: boolean;
    modalProps?: any
    teamlist?: any
}

const withModel: any = WrappedComponent => {

    return class withModel extends Component<withLoadingProps> {// 继承Component
        state = {
            visibleModel: true,
            footer: []
        }

        hideModal = () => {
            this.setState({ visibleModel: false });
        };
        render() {
            const { modalProps, ...rest } = this.props;
            const { visibleModel, footer } = this.state;
            return (
                <Modal
                    visible={visibleModel}
                    className="report-modal"
                    onCancel={this.hideModal}
                    destroyOnClose={true}
                    centered={true}
                    footer={footer}
                    {...modalProps}
                >
                    <WrappedComponent {...rest} />
                </Modal>
            )
        }
    }

}
export default withModel;

 

//helper.tsx

import { unmountComponentAtNode, render as reactDomRender } from 'react-dom';

class Helper {
    // 渲染弹出框model
    renderModel(component) {
        const domId = 'tj-render-dom';
        let domObject = document.querySelector('#' + domId);
        if (!domObject) {
            const el = document.createElement('div');
            el.setAttribute('id', domId);
            document.querySelector('body').appendChild(el);
            domObject = el;
        }
        unmountComponentAtNode(domObject);
        reactDomRender(component, domObject);
    }
}

export default new Helper()

 

//应用

const Model = withModel(PreviewReport);    //要渲染在Model内的组件
        helper.renderModel(<Model
            modalProps={ {
                title: "预览报告",
                width: 1200,
            } }
        />);