antd pro 遇到的问题

最新推荐文章于 2024-04-17 10:50:49 发布

非著名奶茶爱好者

最新推荐文章于 2024-04-17 10:50:49 发布

阅读量1.3k

点赞数 2

分类专栏： antd pro 文章标签：前端前端框架

本文链接：https://blog.csdn.net/weixin_46398446/article/details/119516383

版权

antd pro 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、ProContainer - 页容器

1.隐藏面包屑 aa/bb

breadcrumb={‘none’}

2.注意

使用ProComponent的所有组件时，必须在文档中安装对应的大组件

二、Table表单

1.columns是表头

放三个值：

1.title：名称

1.dataIndex

3.key

表头有几个，columns数组有几项

2.dataSource是数据

3.复选框 (手把手19)

rowSelection属性，onChange:this.onCheckbox

onCheckbox= (selectRowKeys) => {

}

4.删除

若想要在方法中单独处理某个id，要写成下面形式

{()=>this.onHandleDelete(id)}

显示删除的信息以弹窗方式，可以用antd中的message

message.info(接口获取的信息内容)

细节：用户点击删除，出现弹窗用Model，是否真的要删除

5.编辑更新表单

form 表单中有个setFieldValue 的值

Detailed(id).then(res=> {
	this.refs.form.setFieldValue(res.data)
})

三、表单总结

最外边用，不怎么会破坏样式
每一个表单用<Form.Item>
表格用
,一般包含columns,dataSouce,rowKey属性
跳转页面这样写

<Link to={{pathname: './newData'}}><Button type="Default">+ 新建</Button></Link>

四、跳转页面传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VynPagh8-1628410893911)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20210710195528514.png)]

一般使用state密文传参，更安全且数据不会丢失

用this.props.location.state.id获取参数

Form.List可以存储数据，但是必须是方法

五、项目中遇到的问题

1.遍历字典中的key

js dictionary字典 遍历
var dic={A:"AA",B:"BB",C:"CC"} //不能length去for循环(length:undefined)

dic["D"]="DD"; //新增键值对

var tmp=dic["D"]; //通过key获取值

for (var key in dic) {
　　var item = dic[key];

　　console.log(item); //AA,BB,CC,DD

}

2.input框中的onChange获取value

<Input onChange={this.changeVal} placeholder="请输入" maxLength={50} style={{paddingRight:'50px'}}/>

changeVal = (e) => {
    console.log(e.target.value)
  }

3.select中根据id显示name

首先必须确定传的类型都一致

解决方法

再走一遍接口，重新获取dataList，再根据dataList中的id获取name

4.内联样式中style语句中加判断

style={isContent_left?{overflow: 'scroll'}:{overflow:''}}

5.给数组中的对象增添key value

map遍历数组中的对象。比如遍历出的对象为item。增添属性就为item.aa = bb

6.react中使用img时无法添加src

在这里，不能直接在src中写入相对，绝对路径。应该将路径在初始时引入作为一个对象，src直接用这个对象

import welcome_soil from "@/assets/welcome_soil.png"
<img src={welcome_soil}

7.背景图片background-image适应全屏

不能用 100% 100%,应该用cover

8.柱状图的使用

想要让信息框里的内容自定义，可以改成别名

<ColumnChart height={275} width={580}                   autoFit data={stuList}                   style={styles.histogram}                         xField='yearStr'                         yField='count'                         meta={{ // 别名                           yearStr: {                             alias: '年份',                           },                           count: {                             alias: '数量',                           },                         }}                   >              <Interval position="yearStr*count"/>            </ColumnChart>

9.不用link想要实现路由跳转

先引入{history}

import {history} from "@@/core/history";

history.push(“路径”)

10.全局配置reCode出现不同弹窗

可以在request中写一个关于recode的方法，根据不同recode显示不同msg。

注意： 每次调用接口前都先调一下这个recode方法，如果不为200，就直接return，不进行后续操作了。

可以参考以下代码

// 添加响应拦截器  axios.interceptors.response.use(function (response) {    if(response.data.recode === 1001) {      message.error('登录失效')      router.push('/Login/Login')    }    if(response.data.recode === 100){      message.error(response.data.remsg);      return    }    if(response.data.recode === 101){      message.error(response.data.remsg);      return    }    if(response.data.recode === 102){      message.error(response.data.remsg);      return    }    return response;  }, function (error) {    // 对响应错误做点什么    return Promise.reject(error);  });

11.局部路由跳转

场景如下：整个项目的主导航栏在顶部，其中某个模块的导航栏多了一个在左侧，而这个导航栏又细分了一些小模块，对应不同路由。

解决如下：

首先，因为主导航栏是顶部，所以全局导航还是顶部。

其次，因为这个导航栏的模块不在主导航显示，因此配置路由时不写name，这样就不会再主导航栏中出现。

再说配置模块中的左侧导航问题，要分清父子关系，有左侧导航栏的这个模块整体为父亲，细分模块中的每一个单元为子。每一个单元设置的key为它的路径。点击这个menu.item跳转时，跳的那个页面为{this.props.history.key}

然后把这个父亲的页面布局成一左一右。左侧放导航，右侧放content内容。而这个内容是{this.props.children}

下面是个小demo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 $(img-hQ83Oyoe-1628410893914)(C:\Users\86150\AppData\Roaming\Typora\typora-user-images\image-20210726120204004.png)]$

在这个demo中，整个页面都在membercenter中的basicdata中写，而子为components的所有

import React, { Component } from 'react'import {Menu, Layout} from 'antd';import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';const { SubMenu } = Menu;const { Content, Sider } = Layout;import {history} from "@@/core/history";export default class data extends Component {  handleClick = ({ item, key, keyPath, domEvent }) => {    this.props.history.push(key)  };s  render() {    return (        <Layout>          {/*// 侧边栏*/}          <Sider width={200} minHeight={200}>            <Menu              onClick={this.handleClick}              style={{ width: 200,height: '100vh' }}              defaultSelectedKeys={['1']}              defaultOpenKeys={['sub1']}              mode="inline"            >              <Menu.Item key="/memberCenter/myOrder" icon={<MailOutlined />}>我的订单</Menu.Item>              <SubMenu key="/memberCenter/myService" icon={<AppstoreOutlined />} title="我的服务">                <Menu.Item key="/memberCenter/myAskQuestion">我要提问</Menu.Item>                <Menu.Item key="/memberCenter/myQuestion">我的问题</Menu.Item>              </SubMenu>              <Menu.Item key="/memberCenter/myData" icon={<SettingOutlined />}>会员资料</Menu.Item>              <Menu.Item key="/memberCenter/nameAuthen" icon={<SettingOutlined />}>实名认证</Menu.Item>              <Menu.Item key="/memberCenter/changePassword" icon={<SettingOutlined />}>密码修改</Menu.Item>              <SubMenu key="/memberCenter/aboutInvoice" icon={<SettingOutlined />} title="关于发票">                <Menu.Item key="/memberCenter/myInvoice">开具发票</Menu.Item>                <Menu.Item key="/memberCenter/myInformation">填写信息</Menu.Item>                <Menu.Item key="/memberCenter/myHistory">查看历史</Menu.Item>              </SubMenu>              <SubMenu key="/memberCenter/aboutAfterSales" icon={<SettingOutlined />} title="关于售后">                <Menu.Item key="/memberCenter/myRefund">退款记录</Menu.Item>              </SubMenu>            </Menu>          </Sider>          <Layout style={{ padding: '0 24px 24px' }}>            <Content              style={{                background: '#fff',                padding: 24,                margin: 0,                minHeight: 500,              }}            >              {this.props.children}            </Content>          </Layout>        </Layout>    )  }}

12.菜单menu

submenu是带下拉框的，普通不带下拉框的是menu.Item

13.解析从后端获取的html标签

<div dangerouslySetInnerHTML = {{ __html: listdata.content}}></div>

14.小程序上拉加载更多

<ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={scrollTop}
        style={scrollStyle}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
        onScrollToLower={this.toLower.bind(this)}
      >
 // 滚动
  toLower () {
    const {pageSize,pageNumber,name,dataList} = this.state
    console.log(1111111);
    const requireData = {
      pageNumber: pageNumber,
      pageSize: pageSize+12,
      name
    }
    lawyerList(requireData).then((res) => {
      console.log(res);
      const data = res.data.body
      const total = data.total;
      const dataList = data.dataList;
      this.setState({
        total,dataList
      })
    })
  }

小程序的滚动与web端的滚动有点区别，web的滚动时有分页的，因而每一次一页展示的pagesize是固定的。而小程序中，上拉加载都一直在一页中进行。因而是将pagesize加。

15.出现多个相同弹窗

解决方法：在message.error前先销毁message，即message.destory()

16.限制账号，密码字数

在rules规则里写

<Password
            name="pwd"
            placeholder="请输入"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
              {
                min:6,
                message: '密码不能少于6个字符',
              },
              {
                max:16,
                message: '密码不能大于16个字符',
              }

17.基础页面跳转到详情页面，刷新数据不消失

用window.sessionStorage.setItem

// basicData页面
// 根据id进入详情页
onHandleClick = (id) => {
  window.sessionStorage.setItem('activityId',id);
  history.push({
    pathname: "/allInformation/infoDetail",
    params: id,
  })
}

window.sessionStorage.getItem(‘setItem的值’)

const type = cookie.get(‘type’);

// info详情页面
import Cookies from 'cookie-universal';
const cookie = Cookies()

this.state = {
      type: 1,
      id: 0,
    }
componentDidMount() {
  const id = window.sessionStorage.getItem('activityId');
  const type = cookie.get('type');
  if(type){
    this.setState({
      type
    })
  }
  this.getInfoLawyerDetail(id);
}

async getInfoLawyerDetail(id){
  const res=await infolawyerDetail({id});
  if(res.reCode==='200'){
    console.log(res)
    const data = res.body.dataInfo;
    this.setState({
      data
    })
  }
}

六.js问题

1.想要把"[{aa:11},{aa:22}]"变为数组

用substring可以去掉最外侧引号

// 去掉最外侧的引号，使其变为数组
    const education = educationBackground.substring();

非著名奶茶爱好者

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
antd pro 遇到的问题

一、ProContainer - 页容器1.隐藏面包屑 aa/bbbreadcrumb={‘none’}2.注意使用ProComponent的所有组件时，必须在文档中安装对应的大组件二、Table表单1.columns是表头放三个值：1.title：名称1.dataIndex3.key表头有几个，columns数组有几项2.dataSource是数据3.复选框 (手把手19)rowSelection属性，onChange:this.onCheckboxonCheckbox= (
复制链接

扫一扫