React项目经验总结及遇到的坑

来源：互联网收集：自由互联发布时间：2023-02-08

目录 1、报错 xxx.map is not a function 2、如何将后端返回的二进制流转换为base64格式的展示？ 3、下载 4、父组件如何把值传给子组件？子组件又如何接收？ 5、父组件如何获取子组件所有的

1、报错 xxx.map is not a function
2、如何将后端返回的二进制流转换为base64格式的展示？
3、下载
4、父组件如何把值传给子组件？子组件又如何接收？
5、父组件如何获取子组件所有的state里面定义的值？
6.antd+react 之layout左侧菜单点击时加背景色--高亮（适用于每一个项目）

1、报错 xxx.map is not a function

错误原因：因为后端数据还没收到，数组是空的，而map方法不会对空数组检测，结果报错

解决：

拓展：Array.isArray(obj) 如果对象是数组，返回的是true，否则false

2、如何将后端返回的二进制流转换为base64格式的展示？

语法：

<img width="40" height="30" src=`data:image/jpg;base64,${xxx}`/>

xxx指的是：后端返回的图片的字段，如 logo、 galleryImage......

3、下载

1）直接window.open ( 请求的接口 )

这个会闪屏

2）也可以自己写一个点击事件进行下载

原理是动态创建a标签，设置href属性

/**
* 下载资料
* @param {Number} e 当前点击项  name：文件名  format：文件格式  api_url：请求接口
*/
handleDownFile = (event, name, format, api_url) => {
  event.preventDefault();
  event.stopPropagation();
  //开启loading 按钮置灰
  this.setState({
    loadingStatus: true,
    buttonDisabled: true,
  });
  fetch(api_url, {
    method: "get",
    // 下面两行可以不用要
    credentials: "include",
    headers: new Headers({
      "Content-Type": "application/json",
      // 'X-Auth-Token': User.getToken(),
    }),
  })
    .then((response) => {
    response.blob().then((blob) => {
      //关闭loading 按钮恢复正常
      let blobUrl = window.URL.createObjectURL(blob);
      const filename = name + `.${format}`; // 设置文件名称 eg: test.zip
      const aElement = document.createElement("a"); // 获取a标签元素
      document.body.appendChild(aElement);
      aElement.style.display = "none";
      aElement.href = blobUrl; //设置a标签路径
      aElement.download = filename;
      aElement.click();
      document.body.removeChild(aElement);
      this.setState({
        loadingStatus: false,
        buttonDisabled: false,
      });
    });
  })
    .catch((error) => {
    //关闭loading 按钮恢复正常
    this.setState({
      loadingStatus: false,
      buttonDisabled: false,
    });
  });
  };