react封装子组件弹框

一时失言乱红尘 2022-10-07 02:54 176阅读 0赞

import Protocol from './protocol';
    
    {/* 协议弹框 */}
          <Protocol
            visible={visible}
            register={ async (tick) => {
              setVisible(false);
              if(tick){
                setAlertShow(true);
                setTimeout(()=>{
                  setAlertShow(false);
                }, 10000);
              }
            }}
            btnLoading={false}
            title={protocol?.title}
            protocolSrc={protocol?.link}
          />

protocol.js

import React from 'react';
    import { Modal, Button } from 'antd';
    import PropTypes from 'prop-types';
    
    const backAndTextColor = {
      textAlign: 'left',
      fontSize:'13px',
      color: '#999'
    };
    
    const backAndTop = {
      marginTop: '10px',
      textAlign: 'left',
      fontSize:'13px',
      color: '#999'
    };
    
    export default class Protocol extends React.Component {
      static propTypes = {
        visible: PropTypes.bool.isRequired,
        register: PropTypes.func.isRequired,
        btnLoading: PropTypes.bool.isRequired,
        protocolSrc: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
      };
    
      render() {
        return (
          <Modal
            title={this.props.title}
            width="400px"
            visible={this.props.visible}
            bodyStyle={
       { height: '380px' }}
            wrapClassName="protocal-modal"
            maskClosable={false}
            footer={[
              <Button
                key="submit"
                type="primary"
                onClick={() => {
                  !this.props.btnLoading && this.props.register(true);
                }}
              >
                已阅读并同意
              </Button>,
            ]}
            onCancel={() => {
              !this.props.btnLoading && this.props.register(false);
            }}
            // onOk={() => { !this.props.btnLoading && this.props.register(); }}
          >
            <div className="protocol-content">
              <h3>协议内容</h3>
              {/* <iframe
                className="protocol-iframe"
                title="协议"
                src={this.props.protocolSrc}
                frameBorder="0"
              /> */}
              <div style={backAndTextColor}>
              1、您点击#################。
              </div>
              <div style={backAndTextColor,backAndTop}>
              2、您点击同意即表示################################。
              </div>
            </div>
          </Modal>
        );
      }
    }

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221005/0f3eac935f6a4f33b6b888733b137dbd.png