1、報錯 xxx.map is not a function

錯誤原因：因為后端數(shù)據(jù)還沒收到，數(shù)組是空的，而map方法不會對空數(shù)組檢測，結(jié)果報錯

解決：

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

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

語法：

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

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

3、下載

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

這個會閃屏

2）也可以自己寫一個點擊事件進行下載

原理是動態(tài)創(chuàng)建a標簽，設(shè)置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) => {
      //關(guān)閉loading 按鈕恢復正常
      let blobUrl = window.URL.createObjectURL(blob);
      const filename = name + `.${format}`; // 設(shè)置文件名稱 eg: test.zip
      const aElement = document.createElement("a"); // 獲取a標簽元素
      document.body.appendChild(aElement);
      aElement.style.display = "none";
      aElement.href = blobUrl; //設(shè)置a標簽路徑
      aElement.download = filename;
      aElement.click();
      document.body.removeChild(aElement);
      this.setState({
        loadingStatus: false,
        buttonDisabled: false,
      });
    });
  })
    .catch((error) => {
    //關(guān)閉loading 按鈕恢復正常
    this.setState({
      loadingStatus: false,
      buttonDisabled: false,
    });
  });
  };

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

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

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

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

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

這里的init就是父傳過來init()

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

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

2）綁定在子組件上面

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

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

6.antd+react 之layout左側(cè)菜單點擊時加背景色--高亮（適用于每一個項目）

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

解釋說明：

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

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

然后循環(huán)：

效果就是：

 因為有一個屬性是：defaultSelectedKeys，里面寫的key為1 ， 所以就是第一個高亮

落地代碼

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

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

注意：因為點擊tab欄切換時URL變化，頁面相當于刷新了，就會調(diào)用這個鉤子函數(shù)

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

這樣一個高亮效果就完成了

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

最新評論