1、react踩坑
- (1)ant table组件的对齐。刚开始以为是自己配置的 问题。结果是改变了右边的进度条的样式,然后出的问题。
- (2)dva的model使用。项目重构的时候,刚开始把所有数据都放在model里面,觉得所有东西都要用connect来弄在props上,结果发现不行。后来只把全局的数据放在model里面,把局部的数据放在自己组件里面,改变自己组件的数据,就在dispatch里面传一个callback(),在callback()里面用this.setState()来改变。
- (3)高德地图修改marker的图标为antd的图标。问题是,marker的content直接赋值为jsx值
// 坐标地址和物理地址进行转换,返回一个promise,promise的then里面的参数就是转换出来的地址值
transferLnglatToAddress(lnglat) {
return new Promise(resolve => {
const geocoder = new AMap.Geocoder(); // 当然这里还是要先引入Geocoder插件的
geocoder.getAddress(lnglat, (status, result) => {
if (result === {}) {resolve();return;} // 这个地址无法转换出中文
resolve(result.regeocode.formattedAddress);
});
});
}
async userMethod(lnglat) { // 使用上面那个转换函数,用async函数,await的返回值就是后面那个promise的resolve值
const address = await this.transferLnglatToAddress(lnglat);
}
2、导入tsx模块失败
问题:路径问题,改成绝对路径导入就行了。如:
// 需要导入的文件模块为Header.tsx
import Header from './Header'; // 失败
import Header from '@/layouts/Header'; // 成功
// const style = require('./index.less'); // 成功。如果还是不行,就用require来引入
3、img标签引入图片失败
- 使用图片:
- js中使用:如下: 直接在src里面输入链接,然后失败;需要import进来,然后引入。
- css中使用:这个就是在css modules里面使用了。可以用相对路径
../
引入,也可以用别名@,不过需要在@前面加上~
前缀
// 如下,失败
<img src='../assets/logo.png'/>
// 如下,成功
import logo from '../assets/logo.png'
<img src={logo}/>
<img src={require('./foo.png')} /> // 成功
<img src={require('@/foo.png')} /> // 成功
// a.less
.go {
border-image: url('../../../../assets/img/appIcon.jpg') 20%;
background: url(~@/foo.png); // 使用@别名来引入,不过就是需要添加~了
}
4、antd,重置组件样式
重置组件样式,需要首先用控制台找到,需要修改的组件对应的class,然后在css文件中,把对应的类名和样式包在
:global
,中,因为:global中的类名为全局类名,这个类名才不会被css modules弄成哈希字符串
// 表格样式重置。
// 下面为修改table的表头颜色和表头的字体颜色、并且去掉table的所有边框、并且把分页的文字描述部分放最左边其余部分放右边
<Table className={styles.tableStyle}></Table>
.tableStyle {
:global {
.ant-table {
border: none !important; // 去掉table最外层的边框
th, td {
text-align: center; // 文本居中
border: none !important; // 去掉table每个th和td的边框
}
}
<!--.ant-table-he