1、報(bào)錯(cuò) xxx.map is not a function

錯(cuò)誤原因：因?yàn)楹蠖藬?shù)據(jù)還沒(méi)收到，數(shù)組是空的，而map方法不會(huì)對(duì)空數(shù)組檢測(cè)，結(jié)果報(bào)錯(cuò)

解決：

拓展：Array.isArray(obj) 如果對(duì)象是數(shù)組，返回的是true，否則false

2、如何將后端返回的二進(jìn)制流轉(zhuǎn)換為base64格式的展示？

語(yǔ)法：

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

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

3、下載

1）直接window.open ( 請(qǐng)求的接口 )

這個(gè)會(huì)閃屏

2）也可以自己寫一個(gè)點(diǎn)擊事件進(jìn)行下載

原理是動(dòng)態(tài)創(chuàng)建a標(biāo)簽，設(shè)置href屬性

/**
* 下載資料
* @param {Number} e 當(dāng)前點(diǎn)擊項(xiàng)  name：文件名  format：文件格式  api_url：請(qǐng)求接口
*/
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) => {
      //關(guān)閉loading 按鈕恢復(fù)正常
      let blobUrl = window.URL.createObjectURL(blob);
      const filename = name + `.${format}`; // 設(shè)置文件名稱 eg: test.zip
      const aElement = document.createElement("a"); // 獲取a標(biāo)簽元素
      document.body.appendChild(aElement);
      aElement.style.display = "none";
      aElement.href = blobUrl; //設(shè)置a標(biāo)簽路徑
      aElement.download = filename;
      aElement.click();
      document.body.removeChild(aElement);
      this.setState({
        loadingStatus: false,
        buttonDisabled: false,
      });
    });
  })
    .catch((error) => {
    //關(guān)閉loading 按鈕恢復(fù)正常
    this.setState({
      loadingStatus: false,
      buttonDisabled: false,
    });
  });
  };

4、父組件如何把值傳給子組件？子組件又如何接收？

1）比如，我在父組件里面的方法我想傳給子組件

_this是隨便定義的，和子組件有關(guān)系，一會(huì)在子組件里面要寫的名字

this.init 就是父組件里面?zhèn)鞯膇nit方法

2）子組件是這樣接收的 this.props.xxx

這里的init就是父?jìng)鬟^(guò)來(lái)init()

5、父組件如何獲取子組件所有的state里面定義的值？

1）在父組件里面聲明一個(gè)ref,是在父組件里面哈

2）綁定在子組件上面

3）然后就可以通過(guò)this.ref.current.state獲取，在父組件里面

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

6.antd+react 之layout左側(cè)菜單點(diǎn)擊時(shí)加背景色--高亮（適用于每一個(gè)項(xiàng)目）

需求： 我想點(diǎn)擊產(chǎn)品管理，訂單管理，信息管理能加藍(lán)色背景，不是單純的通過(guò)點(diǎn)擊加背景色

解釋說(shuō)明：

首先我們從組件上面復(fù)制下來(lái)的左側(cè)菜單長(zhǎng)這樣，defaultSelectedKeys是默認(rèn)選中的菜單，一會(huì)我們會(huì)操作它，而且里面的數(shù)據(jù)寫死的，我們不想這樣，改為動(dòng)態(tài)的渲染

落地代碼：
如何動(dòng)態(tài)渲染左側(cè)菜單呢？ 我們可以定義一個(gè)數(shù)據(jù)（這一步和實(shí)現(xiàn)背景色還沒(méi)有關(guān)系）

然后循環(huán)：

效果就是：

 因?yàn)橛幸粋€(gè)屬性是：defaultSelectedKeys，里面寫的key為1 ， 所以就是第一個(gè)高亮

落地代碼

實(shí)現(xiàn)如何點(diǎn)擊高亮呢？
（1）首先定義一個(gè)存放key的初始值，

（2）然后在這個(gè)鉤子函數(shù)里面寫邏輯代碼，思路就是：取出當(dāng)前的url，然后再和自己的path路徑里面的url進(jìn)行匹配，如果匹配成功，就取出當(dāng)前key值，并且在setState里面修改state的值，然后綁定在默認(rèn)值上面

注意：因?yàn)辄c(diǎn)擊tab欄切換時(shí)URL變化，頁(yè)面相當(dāng)于刷新了，就會(huì)調(diào)用這個(gè)鉤子函數(shù)

注意這里： 可以直接在Menu上面寫 selectedKeys={this.state.defaultMenuKey}，但是每次都要this.state.xxx
挺麻煩的，所以就解構(gòu)一下

這樣一個(gè)高亮效果就完成了

到此這篇關(guān)于React項(xiàng)目經(jīng)驗(yàn)總結(jié)的文章就介紹到這了,更多相關(guān)React項(xiàng)目總結(jié)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論