React 封装 Card 组件

组件代码

import React from react; import { MyCardWrapper, MyCardHeader, MyCardMain } from ./styled;  interface IMyCard {   children?: React.ReactNode;   title?: string | React.ReactNode;   headerRightSlot?: string | React.ReactNode;   border?: boolean;   borderColor?: string;   showHeader?: boolean;   mPadding?: string;   footer?: React.ReactNode; }  const MyCard: React.FC<IMyCard> = (props) => {   const headerBorder = typeof props.border === undefined ? true : props.border   const isShowHeader = typeof props.showHeader === undefined ? true : props.showHeader   const headerBorderColor = props.borderColor || '#fbf1f1'   return (     <MyCardWrapper>       <MyCardHeader border={headerBorder} show={isShowHeader} borderColor={headerBorderColor}>         <div className=title>           { props.title }         </div>         <div className=header-right>         { props.headerRightSlot }         </div>       </MyCardHeader>       <MyCardMain padding={props.mPadding}>         { props.children }       </MyCardMain>       { props.footer }     </MyCardWrapper>   ) }  export default MyCard

样式代码

import styled from styled-components;  export const MyCardWrapper = styled.div`   width: 100%;   height: 100%;   background: #ffffff;   border-radius: 4px; ` export const MyCardHeader = styled.div<{border: boolean, show: boolean; borderColor: string }>`   width: 100%;   height: 40px;   display: ${(props) => props.show ? 'flex' : none };   align-items: center;   justify-content: space-between;   padding: 0 10px;   border-bottom: 1px solid ${(props) => props.border ? props.borderColor : transparent };   .title {     font-size: 16px;     font-weight: 550;   } ` export const MyCardMain = styled.div<{padding: string | undefined}>`   padding: ${(props) => props.padding || '10px'}; `

使用

import React from react; import MyCard from @/components/MyCard;  const Home: React.FC = () => {   const onMore = () => {     alert('More')   }   const more = <span onClick={onMore}>More</span>   return (     // <SystemFrame>     // </SystemFrame>     <>       <MyCard title=默认card headerRightSlot={more}>this is Home</MyCard>       <div style={{height: 5px}}></div>        <MyCard border={false} title=tititle 没有 border>this is Home</MyCard>       <div style={{height: 5px}}></div>        <MyCard borderColor=red title=设置 border 颜色>this is Home</MyCard>       <div style={{height: 5px}}></div>        <MyCard showHeader={false} title=不展示 Header>不展示 Header</MyCard>       <div style={{height: 5px}}></div>        <MyCard title=有 footer footer={<div style={{background: yellow}}>我是footer</div>}>this is Home</MyCard>     </>   ) }  export default Home

展示效果