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 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 (<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>);} }

?

?

效果圖：

總結

以上是生活随笔為你收集整理的react封装子组件弹框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。