react封装子组件弹框

import Protocol from './protocol';{/* 协议弹框 */}<Protocolvisible={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 ponent {static propTypes = {visible: PropTypes.bool.isRequired,register: PropTypes.func.isRequired,btnLoading: PropTypes.bool.isRequired,protocolSrc: PropTypes.string.isRequired,title: PropTypes.string.isRequired,};render() {return (<Modaltitle={this.props.title}width="400px"visible={this.props.visible}bodyStyle={{ height: '380px' }}wrapClassName="protocal-modal"maskClosable={false}footer={[<Buttonkey="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>{/* <iframeclassName="protocol-iframe"title="协议"src={this.props.protocolSrc}frameBorder="0"/> */}<div style={backAndTextColor}>1、您点击#################。</div><div style={backAndTextColor,backAndTop}>2、您点击同意即表示################################。</div></div></Modal>);}}

效果图：