react基于antd二次封装spin组件

目录

• react基于antd二次封装spin组件
• • 组件
  • 使用组件
  • 效果

react基于antd二次封装spin组件

组件

import { Spin } from 'antd';
import propTypes from "prop-types";
import React from 'react';
import styleId from "styled-components";
// 使用 父div必须加 position:'relative'
const SpinCom = (props) => {
  // console.log('props',props);
    return (
        <SpinComWrap>
          <Spin className='spin' tip={props.tip} spinning={props.spinning} />
        </SpinComWrap>
    )
}
// props
SpinCom.propTypes = {
  tip: propTypes.string,
  spinning: propTypes.bool.isRequired,
  size: propTypes.string,
};
SpinCom.defaultProps = {
  tip: 'Loading...', // 默认值
  spinning: false,
  size: 'default'
};
const SpinComWrap = styleId.div`
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  .spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
`
export default SpinCom

使用组件

import { Button } from 'antd';
import React, { useState } from 'react';
import SpinCom from "./SpinCom";
export default function App(props) {
  const [show,setshow] = useState(false)
  const showspain = () => {
    setshow(!show)
  }
    return (
        <div className='content' style={{width:'200px',height: '200px',background: '#ccc',position:'relative'}}>
          <SpinCom spinning={show}></SpinCom>
          app -{show ? 1: 0}
          <Button type="primary" onClick={showspain}>Button</Button>
        </div>
    )
}

效果