React项目经验总结

我会带着你远行 2023-09-28 14:48 138阅读 0赞

**目录**

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方法不会对空数组检测，结果报错

解决：

![b11226e726b3a8d90634c40a26fc2934.png][]

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

--------------------

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

语法：

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

--------------------

### 3、下载 ###

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

![b9a6a3937bbcb499950b3f8dfe27a32f.png][]

这个会闪屏

![6b1eff4d9a8dafc0697bc7324c890acd.png][]

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,
        });
      });
      };

--------------------

#### 4、父组件如何把值传给子组件？子组件又如何接收？ ####

1）比如，我在父组件里面的方法我想传给子组件

\_this是随便定义的，和子组件有关系，一会在子组件里面要写的名字

this.init 就是父组件里面传的init方法

![0b7dac046974ed9c599c2ed83783b1aa.png][]

2）子组件是这样接收的 this.props.xxx

这里的init就是父传过来init()

![27705492a5f2b297b924cbcedf5eff3a.png][]

--------------------

#### 5、父组件如何获取子组件所有的state里面定义的值？ ####

1）在父组件里面声明一个ref,是在父组件里面哈

![1868dd5a9f456978489ce92fde56ada0.png][]

2）绑定在子组件上面

![7aedabbe870864f97d7dd3ee21cf75de.png][]

3）然后就可以通过this.ref.current.state获取，在父组件里面

![cd47fe81992d01e556c60fbb5de90ad0.png][]

注意：所有的操作都是在父组件里面操作，子组件不需要做什么

--------------------

### 6.antd+react 之layout左侧菜单点击时加背景色--高亮（适用于每一个项目） ###

需求： 我想点击产品管理，订单管理，信息管理能加蓝色背景，不是单纯的通过点击加背景色

![c57ce9613e8da946bf03aeb3e0ca5a28.png][]

解释说明：

> 首先我们从组件上面复制下来的左侧菜单长这样，defaultSelectedKeys是默认选中的菜单，一会我们会操作它，而且里面的数据写死的，我们不想这样，改为动态的渲染

![227044cfea4fda759cd3d8c390a29123.png][]

落地代码：  
如何动态渲染左侧菜单呢？ 我们可以定义一个数据（这一步和实现背景色还没有关系）

![4bca55d911504bf5c5ab5784610d893b.png][]

然后循环：

![6b03596c40228d412a884cbecb791848.png][]

效果就是：

![217460faf2fb9fea07b4d60a3205cbac.png][]

因为有一个属性是：defaultSelectedKeys，里面写的key为1 ， 所以就是第一个高亮  
  
**落地代码**

实现如何点击高亮呢？  
（1）首先定义一个存放key的初始值，

![e8ad52155d0751a489e8479aff9f05d0.png][]

（2）然后在这个钩子函数里面写逻辑代码，思路就是：取出当前的url，然后再和自己的path路径里面的url进行匹配，如果匹配成功，就取出当前key值，并且在setState里面修改state的值，然后绑定在默认值上面

注意：因为点击tab栏切换时URL变化，页面相当于刷新了，就会调用这个钩子函数

![cbb50758e643ffe0e2b6c93582b0994c.png][]

注意这里： 可以直接在Menu上面写 selectedKeys=\{this.state.defaultMenuKey\}，但是每次都要this.state.xxx  
挺麻烦的，所以就解构一下

![4e268f19dcb9c32efbc520f9446d76d9.png][]

这样一个高亮效果就完成了

###  ###

[b11226e726b3a8d90634c40a26fc2934.png]: https://img-blog.csdnimg.cn/img_convert/b11226e726b3a8d90634c40a26fc2934.png
[b9a6a3937bbcb499950b3f8dfe27a32f.png]: https://img-blog.csdnimg.cn/img_convert/b9a6a3937bbcb499950b3f8dfe27a32f.png
[6b1eff4d9a8dafc0697bc7324c890acd.png]: https://img-blog.csdnimg.cn/img_convert/6b1eff4d9a8dafc0697bc7324c890acd.png
[0b7dac046974ed9c599c2ed83783b1aa.png]: https://img-blog.csdnimg.cn/img_convert/0b7dac046974ed9c599c2ed83783b1aa.png
[27705492a5f2b297b924cbcedf5eff3a.png]: https://img-blog.csdnimg.cn/img_convert/27705492a5f2b297b924cbcedf5eff3a.png
[1868dd5a9f456978489ce92fde56ada0.png]: https://img-blog.csdnimg.cn/img_convert/1868dd5a9f456978489ce92fde56ada0.png
[7aedabbe870864f97d7dd3ee21cf75de.png]: https://img-blog.csdnimg.cn/img_convert/7aedabbe870864f97d7dd3ee21cf75de.png
[cd47fe81992d01e556c60fbb5de90ad0.png]: https://img-blog.csdnimg.cn/img_convert/cd47fe81992d01e556c60fbb5de90ad0.png
[c57ce9613e8da946bf03aeb3e0ca5a28.png]: https://img-blog.csdnimg.cn/img_convert/c57ce9613e8da946bf03aeb3e0ca5a28.png
[227044cfea4fda759cd3d8c390a29123.png]: https://img-blog.csdnimg.cn/img_convert/227044cfea4fda759cd3d8c390a29123.png
[4bca55d911504bf5c5ab5784610d893b.png]: https://img-blog.csdnimg.cn/img_convert/4bca55d911504bf5c5ab5784610d893b.png
[6b03596c40228d412a884cbecb791848.png]: https://img-blog.csdnimg.cn/img_convert/6b03596c40228d412a884cbecb791848.png
[217460faf2fb9fea07b4d60a3205cbac.png]: https://img-blog.csdnimg.cn/img_convert/217460faf2fb9fea07b4d60a3205cbac.png
[e8ad52155d0751a489e8479aff9f05d0.png]: https://img-blog.csdnimg.cn/img_convert/e8ad52155d0751a489e8479aff9f05d0.png
[cbb50758e643ffe0e2b6c93582b0994c.png]: https://img-blog.csdnimg.cn/img_convert/cbb50758e643ffe0e2b6c93582b0994c.png
[4e268f19dcb9c32efbc520f9446d76d9.png]: https://img-blog.csdnimg.cn/img_convert/4e268f19dcb9c32efbc520f9446d76d9.png