高阶函数的应用_1

image.png

ShowDialog.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button } from 'antd';
import { ModalConfig } from './ModalConfig';

interface Props {
  //   unMount: Function;
}
export function showDialog(WrappedComponent) {
  return class extends React.Component<Props> {
    state = {
      visible: false,
    };

    componentDidMount() {
      this.setState({ visible: true });
    }

    componentWillUnmount() {
      this.setState({ visible: false });
      //   this.props.unMount();
    }

    render() {
      return (
        <>
          <WrappedComponent
            // unMount={unMount}
            visible={this.state.visible}
            setVisible={(bol) => {
              this.setState({ visible: bol });
              //   this.props.unMount();
            }}
          />
        </>
      );
    }
  };
}

showDialog.show = function show(SubModal) {
  const container = document.createElement('div');
  //   document.body.appendChild(container);

  //   function unMount() {
  //     ReactDOM.unmountComponentAtNode(container);
  //     document.body.removeChild(container);
  //   }
  const NewComp = showDialog(SubModal);

  ReactDOM.render(<NewComp />, container);
};

ModalConfig.tsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Button } from 'antd';

interface Props {
  visible: boolean;
  setVisible: Function;
}
export function ModalConfig(props: Props) {
  const { visible, setVisible } = props;

  const handleCancel = (e) => {
    setVisible(false);
  };

  const handleOk = (e) => {
    setVisible(false);
  };

  return (
    <>
      <Modal
        title="测试框"
        width={628}
        bodyStyle={{
          height: 452,
          overflow: 'auto',
        }}
        visible={visible}
        maskClosable={false}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleOk}>
            确认
          </Button>,
        ]}></Modal>
    </>
  );
}

index.tsx

import { showDialog } from './ShowDialog';
import { ModalConfig } from './ModalConfig';

export function videoAnswer() {
  return showDialog.show(ModalConfig);
}

调用

import { videoAnswer } from '../VideoAnswer';
onChange={(e) =>
              e.target.checked ? videoAnswer() : onChangeExtraAction({ code: 'is_video', value: `${e.target.checked}` })
            }>