Ant Design Pro使用备注

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