当前位置：首页 > news >正文

React实战过程的知识了解

news 2025/8/26 20:21:29

做项目用到react和antd，没办法循序渐进的学习，只能把一些点记录在这里，希望大家指正。

1.杂七杂八

正文

//actionRef，操作表单的预设方法，包括：刷新、重置所有项并刷新、重置到默认项、加载更多、清空选中项
const actionRef = useRef();

1.ProTable Demo

这是antd提供的一种高级表格，如果我们的表格需要和后端交互，这是较好的一种选择。

1.1 request

表格主要是和后端交互，所以为这是protable里最重要的api。
request 会接收一个对象。对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。

<ProTable<DataType, Params>// params 是需要自带的参数// 这个参数优先级更高，会覆盖查询表单的参数params={params}request={async (// 第一个参数 params 查询表单和 params 参数的结合// 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范params: T & {pageSize: number;current: number;},sort,filter,) => {// 这里需要返回一个 Promise,在返回之前你可以进行数据转化// 如果需要转化参数可以在这里进行修改const msg = await myQuery({page: params.current,pageSize: params.pageSize,});return {data: msg.result,// success 请返回 true，// 不然 table 会停止解析数据，即使有数据success: boolean,// 不传会使用 data 的长度，如果是分页一定要传total: number,};}}
/>

1.2 columns

//引入方法
import { ProTable } from '@ant-design/pro-components';//必传columns，protable会根据该字段渲染列
columns={[{title: 'appid', dataIndex: 'appid', key: 'appid'
}, {title: '公众号名称', dataIndex: 'name', key: 'name'
}, {//默认每个字段都会被查询，增加search:false，或者hideInSearch:true，就会被隐藏title: '类型', dataIndex: 'type', key: 'type', hideInSearch: true
}, {title: '是否认证', dataIndex: 'verified', key: 'verified', hideInSearch: true
}, {title: '操作', hideInSearch: true,render: (_, row) => {return <Space><WxAccountSave edit appid={row.appid}/><a onClick={() => handleDetail(row.appid)}key="link1">接入信息</a><a onClick={() => handleDel(row.appid)} key="link2">删除</a></Space>}
}
]}

查询其实主要还是跟后端互动，所以查询的list方法需要健壮些，可以带多个参数，比如我这边的写法是这样。

    List<WxAccount> wxAccountList(Map<String, Object> req);<select id="wxAccountList" resultType="com.demo.admin.server.wechat.entity.db.WxAccount">select wxac.appid,wxac.name,wxac.type,wxac.verifiedfrom t_smart_wx_account wxacleft join t_smart_org tso on wxac.bind_org_code = tso.UUID<where><if test="name!=null and name!=''">and wxac.name like CONCAT('%',#{name},'%')</if><if test="appid!=null and appid!=''">and wxac.appid like CONCAT('%',#{appid},'%')</if></where></select>