antdesign经验总结

从使用react的两年以来一直在用antdesign，不得不说antdesign是我使用的最舒服的UI组件库，从说明文档、使用方式、用户体验各方面来说都非常好用，4.0版本对之前的很多不方便的地方也有所优化，期间遇到很多问题，今天想把在使用过程中遇到的问题总结一下，持续更新

Modal弹窗

forceRender配置

  <Modal
    forceRender ={true}
  >
    <p>Bla bla ...</p>
    <p>Bla bla ...</p>
    <p>Bla bla ...</p>
  </Modal>

Modal弹窗中有时需要渲染Form表单，在使用this.formname.current. setFieldsValue({})时会提示你this.formname是undefined，这是因为当你弹出弹窗时form还没有渲染造成的，即使你在setState回调中获取form实例也无法取到，之前我们还使用延时器setTimeout去获取form实例，但这种办法充满不确定性，加上该属性后，modal中的内容会强制渲染，这样你就可以获取到form实例了

destroyOnClose配置

关闭时销毁 Modal 里的子元素，指弹窗关闭时弹窗中的内容会被销毁，有时弹窗中的表单是修改内容，在关闭时再次打开会显示上一次编辑的内容，使用this.formname.current. resetFields()也会出现获取不到实例的现象，添加该属性后每次打开都是新渲染的内容，所以之前的渲染会被清空,也省去了this.formname.current. resetFields()操作

Upload组件

beforeUpload配置

项目中的图片上传需要存为base64编码形式，有个上传确认按钮，点击确认才把上传列表中的图片上传到后台，但是每次拖拽或上传文件都会走action，这样后台就需要另开发一个接口接收图片，所以需要把action禁掉，只需要在beforeUpload属性中加上return false，组件就不会走action了，确认上传时把onChange中以存好的数组传到后台处理，另外加上图片转base64和获取图片尺寸的代码附上

import React,{Component,Fragment} from 'react'
class PictureManage extends Component{
    getImgBase64Url = (file)=>{
        return new Promise((resolve,reject)=>{
            var reader = new FileReader();
            reader.onloadend = function () {
                resolve(reader.result)
            }
            if (file) {
                reader.readAsDataURL(file);
            }
        })
    }

    getImgWH = (imgbase64)=>{
        return new Promise((resolve,reject)=>{
            let img = new Image();
            img.src = imgbase64;
            img.onload = ()=>{
                resolve({
                    width:img.width,
                    height:img.height
                })
            }
        })
    }
}