最近一直都在忙工作,忙来忙去,也不知道自己收获了什么,觉得,必须要总结一下
(1)在react和antd中,当使用了Row和Col的时候,如果设置了display:block的时候,紧接着的下一个的Row和Col就不会和上一个左对齐显示,而是左边显示很大的空白,最后,解决方法是,将要设置display:block的设置为display:inline-block,再设置宽度为100%;就可解决
(2)我在做oa系统的时候,也面分为三个部分,上面的头部,和下面的左右脚结构,上面的头部有登陆用户的用户名,用户名右下角有一个小箭头,点击会显示退出,点击推出,会弹出是否确定推出。我看我的前辈经点击箭头之后出现的一系列都写在了自己的组件上,这样的话,逻辑更加清晰,页面也更加简洁
(3)最近看前辈代码,发现好的东西,
{
title: '操作',
dataIndex: 'operation',
render: (text, record) => {
return (
this.state.dataSource.length > 1 ?
(
<Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
<a href="#">Delete</a>
</Popconfirm>
) : null
);
一是这个Popconfirm的这个写法,第二个就是给我了提示,当使用三目运算符的时候,如果不符合条件的话,可以直接用null来替代
(4)前辈的第二个好代码
onDelete = (key) => {
const dataSource = [...this.state.dataSource];
this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
}
当用户点击了删除之后,需要从dataSource中将这行数据删除掉,(当然,如果请求后台接口的话,就不必这样做了),前辈直接使用filter方法,来将不等于删除的key的数据,全部重新设置到dataSource这个状态上,这样就实现了,将一个数据从数组中删除的功能。这个方法真的很方便
(5)前辈的第三个好代码
for(name in this.search){
if(this.search[name] == '' || this.search[name] == '-1'){
delete this.search[name];
}
}
在这几行代码中,我学会了将一个key从对象中删除,如果删除成功的话,会返回true,否则false,但是这里要注意,这里只能删除当前用户的key,如果原型上还有同名的属性,那么对象中的key删除后,就会使用原型的属性,原型上的属性要选择下面的删除方式
delete 对象.prototype.属性;
关于这个delete的用法,还有具体的细节,请大家自行百度