欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React項目經(jīng)驗總結(jié)及遇到的坑

 更新時間:2022年07月13日 10:44:12   作者:接著奏樂接著舞  
這篇文章主要介紹了React項目經(jīng)驗總結(jié),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • webpack構(gòu)建react多頁面應用詳解

    webpack構(gòu)建react多頁面應用詳解

    這篇文章主要介紹了webpack構(gòu)建react多頁面應用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 使用useEffect模擬組件生命周期

    使用useEffect模擬組件生命周期

    這篇文章主要介紹了使用useEffect模擬組件生命周期,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • reset.css瀏覽器默認樣式表重置(user?agent?stylesheet)的示例代碼

    reset.css瀏覽器默認樣式表重置(user?agent?stylesheet)的示例代碼

    這篇文章主要介紹了reset.css瀏覽器默認樣式表重置(user?agent?stylesheet),本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-12-12
  • React使用高階組件與Hooks實現(xiàn)權(quán)限攔截教程詳細分析

    React使用高階組件與Hooks實現(xiàn)權(quán)限攔截教程詳細分析

    高階組件就是接受一個組件作為參數(shù)并返回一個新組件(功能增強的組件)的函數(shù)。這里需要注意高階組件是一個函數(shù),并不是組件,這一點一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧
    2023-01-01
  • react 父子組件之間通訊props

    react 父子組件之間通訊props

    這篇文章主要介紹了react 父子組件之間通訊props,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • react-redux集中式狀態(tài)管理及基本使用與優(yōu)化

    react-redux集中式狀態(tài)管理及基本使用與優(yōu)化

    react-redux把組件分為兩類,一類叫做UI組件,一類叫做容器組件,這篇文章主要介紹了集中式狀態(tài)管理<react-redux>基本使用與優(yōu)化,需要的朋友可以參考下
    2022-08-08
  • React之PureComponent的使用作用

    React之PureComponent的使用作用

    這篇文章主要介紹了React之PureComponent的使用作用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 詳解React中的組件通信問題

    詳解React中的組件通信問題

    本篇文章中主要介紹了詳解React中的組件通信問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • nginx配置React靜態(tài)頁面的方法教程

    nginx配置React靜態(tài)頁面的方法教程

    作為一個前端開發(fā)時刻想著,怎么把自己寫的東西,丟到自己的服務器上面,然后展示給別人看。下面我就簡單直白的寫下,這篇文章主要給大家介紹了關(guān)于nginx配置React靜態(tài)頁面的方法教程,需要的朋友可以參考下。
    2017-11-11
  • React?Immutable使用方法詳細介紹

    React?Immutable使用方法詳細介紹

    Immutable.js出自Facebook,是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu),使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值,但是在內(nèi)部結(jié)構(gòu)是共享的,來減少內(nèi)存占用
    2022-09-09

最新評論