React实战过程的知识了解

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

1.杂七杂八

正文

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

//刷新界面
actionRef?.current?.reload();

//重置表单数据
formRef?.current?.resetFields()

//富文本展示
<div dangerouslySetInnerHTML={
    
    {
    
    __html: contentInfo}}/>

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.verified
        from t_smart_wx_account wxac
        left 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>

3.子标题

正文

在这里插入代码片

4.子标题

正文

在这里插入代码片

5.子标题

正文

在这里插入代码片