react-组件封装（以弹窗为例-H5）

/ eslint-disable /
import React, { useState, useEffect, Component } from 'react';
import { Modal } from 'antd-mobile';
import Style from './index.module.less';
import 'antd-mobile/dist/antd-mobile.css';

interface Props {
// 左边按钮回调
leftBtnClick: Function;
// 右边回调
rightBtnClick: Function;
// 左边按钮文案
leftBtnTxt: string;
// 右边按钮文案
rightBtnTxt: string;
// 内容
content: string;
//小字内容
smallprint: string;
// 是否显示
visible: boolean;
}

const PopupModal: React.FC = (props: Props) => {
const {

visible,
content,
smallprint,
leftBtnTxt,
rightBtnTxt,
leftBtnClick,
rightBtnClick

} = props;

// 渲染弹窗

return (
  
    

      
{content}
      
{smallprint}
      

        
 leftBtnClick()}>
          {leftBtnTxt}
        
        
 rightBtnClick()}>
          {rightBtnTxt}
        
      
    
  
);

};

export default PopupModal;