React中使用动态创建的a标签href属性异步下载文件

需求：点击Table列表中的文件名称，触发click事件，然后dispatch调取后台接口，根据返回值来确定是否下载文件。
这里面因为涉及到了后台api，所以是异步行为，这时候不能直接给a标签href属性赋值，因为点击a标签的时候会同时执行onClick方法和href属性，所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。

1、Table中，在"文件名称"后面增加一个下载按钮来触发click事件：

columns = [{
   title: '文件名称',
   dataIndex: 'fileName',
   render: (text, record) => {
     const { fileAddress, exportStatus, id } = record;
     let url;
     // 后台返回的文件地址有时候会带有协议头，有时候不带，所以添加了判断。
     if (fileAddress.includes('http')) {
       url = fileAddress;
     } else {
       // 这里使用了**缺省协议**
       url = `//${fileAddress}`;
     }
     return (
       <>
         <span> {text}</span>
         &nbsp;&nbsp;&nbsp;
         <Button
           type='primary'
           size='small'
           disabled={exportStatus === 4}
           onClick={e => this.downloadBankFile(e, id, url, text)}
         >
           下载
         </Button>
       </>
     );
   }
 }]

缺省协议，使用//替代http://和https://

2、在downloadBankFile函数中动态添加a标签：

downloadBankFile = (e, id, url, text) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'exportfile/fetch',
      payload: {
        data: {
          id
        }
      },
      callBack(status, msg) {
        if (status === 200) {
          // 动态生成a标签，自动下载文件
          const a = document.createElement('a');
          a.style.display = 'none';
          a.download = text;
          a.href = url;
          document.body.appendChild(a);
          a.click();  // 自动触发点击a标签的click事件
          document.body.removeChild(a);
        } else {
          message.error(msg);
        }
      }
    });
  };