React + 项目(从基础到实战) -- 第六期

ui 组件库介绍

组件总览 - Ant Design (antgroup.com)
安装 - Material-UI (mui.com)
Tailwind UI - Official Tailwind CSS Components & Templates

引入antd

Ant Design of React - Ant Design

常用组件

// 引入antd 美化import { Layout } from 'antd';const { Header, Footer, Content } = Layout;//引入组件import {Button,Space,Divider} from 'antd';//引入图标import {PlusOutlined ,BarsOutlined,StarOutlined,DeleteOutlined,} from '@ant-design/icons';//引入组件import {Space,Typography} from 'antd';//引入图标import { FormOutlined } from '@ant-design/icons';import { HOME_PATH } from '../router';const { Title } = Typography;

定义常用的路由常量

export const HOME_PATH='/'export const LOGIN_PATH='/login'export const REGISTER_PATH='/register'export const MANAGE_PATH='/manage/list'

我的问卷: 列表卡片

问卷卡片 : 气泡弹出框使用

 <Popconfirmtitle="复制问卷?"okText="确定"cancelText="取消"onConfirm={duplicate}><Button type="text" icon={<CopyOutlined/>} size="small">复制</Button></Popconfirm>

问卷卡片:confirm弹出框

const {confirm} = Modal;confirm({title: '确定删除吗?',icon: <ExclamationCircleOutlined />,content: '删除后问卷将无法恢复',okText: '确定',cancelText: '取消',onOk() {message.success("删除成功")},onCancel() {message.error("取消删除")},})

问卷卡片

import React , { FC} from "react";import styles from "./QuestionCard.module.scss";import { Link, useNavigate } from "react-router-dom";//引入组件import{Divider, Space, Tag,Button, message, Popconfirm ,Modal} from "antd";//引入icon图标import { EditOutlined, StarOutlined ,BarsOutlined, CopyOutlined, DeleteOutlined ,ExclamationCircleOutlined} from "@ant-design/icons";const {confirm} = Modal;//组件传值//定义属性type PropsType={id:string,title:string,isPublished:boolean,isStar:boolean,answerCount:numbercreateAt:string,}const QuestionCard:FC<PropsType> = (props:PropsType) => {const {id,title,isPublished,isStar,answerCount,createAt}=propsconst nav=useNavigate();function duplicate(){message.success("执行复制")}function del(){confirm({title: '确定删除吗?',icon: <ExclamationCircleOutlined />,content: '删除后问卷将无法恢复',okText: '确定',cancelText: '取消',onOk() {message.success("删除成功")},onCancel() {message.error("取消删除")},})}return (<><div className={styles.container} ><div className={styles.title}><div className={styles.left}><Link to={isPublished ? `/question/stat/${id}` : `/question/edit/${id}`}><Space>{isStar && <StarOutlined style={{color:'red'}}/>}{title}</Space></Link></div><div className={styles.right}><Space>{isPublished ? <Tag color="processing">已发布</Tag>: <Tag>未发布</Tag>}<span> 答卷数量: {answerCount}  </span><span>{createAt}</span></Space></div></div><Divider style={{margin:'10px 0'}}></Divider><div className={styles.bottom}><div className={styles.left}><Space><Button icon={<EditOutlined/>} type="text" size='small' onClick={()=>nav(`/question/edit/${id}`)} >编辑问卷</Button><Button icon={<BarsOutlined/>} type="text" size='small' onClick={()=>nav(`/question/stat/${id}`)}>问卷统计</Button></Space></div><div className={styles.right}><Space><Button type="text" icon={<StarOutlined/>} size="small">{isStar ? "取消标星" : "标星问卷"}</Button><Popconfirmtitle="复制问卷?"okText="确定"cancelText="取消"onConfirm={duplicate}><Button type="text" icon={<CopyOutlined/>} size="small">复制</Button></Popconfirm><Button type="text" icon={<DeleteOutlined/>} size="small" onClick={del}>删除</Button></Space></div></div></div></>)}export default QuestionCard;

星标问卷:列表卡片+分页

和上面差不多

回收站 : 表格


/表格列const tableColums=[{title:"标题",dataIndex:"title",// key:"title"//循环的key,他会默认取dataIndex的值},{title:"是否发布",dataIndex:"isPublished",render:(isPublished:boolean)=>{return isPublished ?  <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}},{title:"答卷",dataIndex:"answerCount"},{title:"创建时间",dataIndex:"createAt"}]//问卷列表数据模拟const rawQuestionList=[{//_id:"1"  mondob数据库id:'1',title:"问卷1",isPublished:false,isStar:true,answerCount:100,createAt:"4月5日 12:23"},{id:'2',title:"问卷2",isPublished:true,isStar:false,answerCount:100,createAt:"4月5日 12:23"},{id:'3',title:"问卷3",isPublished:true,isStar:true,answerCount:100,createAt:"4月5日 12:23"},{id:'4',title:"问卷4",isPublished:false,isStar:false,answerCount:100,createAt:"4月5日 12:23"}]<TabledataSource={questionList}columns={tableColums}pagination={false}rowKey={(record)=>record.id}/>

添加恢复删除功能

 //将jsx片段提取成为变量//表格项提取出来const TableElem = <><div style={{marginBottom:"16px"}}><Space><Button type="primary" disabled={selectedIds.length==0}>恢复</Button><Button danger disabled={selectedIds.length==0} onClick={del}>彻底删除</Button></Space></div><TabledataSource={questionList}columns={tableColums}pagination={false}rowKey={(record)=>record.id}rowSelection={{type:"checkbox",onChange:(selectedRowKeys)=>{setSelectedIds(selectedRowKeys as string[])}}}/></>