react中this的使用方法總結

2021-10-03 14:04:52 字數 2066 閱讀 7706

通過this.事件名稱.bind(this)進行this繫結。

通過箭頭函式進行this繫結。

通過賦值的方式進行繫結:var _this = this;。

通過this.事件名稱.bind(this)進行this繫結。

通過在map函式的第二個引數將this傳入進行繫結。

通過this.事件名稱.bind(this,引數1,引數2,引數3)進行引數傳遞。

通過箭頭函式進行引數傳遞。

**展示如下:

import react,

from

'react'

;class

thiscomponent

extends

component

this

.funcone=

this

.funcone.

bind

(this)}

funcone()

functwo()

functhree=(

)=>

funcfoure()

changmes

(value1,value2)

changmestwo

(value)

changmesthree

=(value)

=>

liclick1

=(e)

=>

liclick2

=(e)

=>

liclick3

=(e)

=>

liclick4

=(e,value)

=>

render()

=this

.state;

var _this =

this

;return

(this 的繫結方法<

/h3>

>

this的第一種繫結方法<

/button>

>

>

this的第二種繫結方法<

/button>

>

>

this的第三種繫結方法<

/button>

>

>

this的第四種繫結方法<

/button>

>

react中遇到迴圈時this的繫結方法<

/h3>

第一種方法:var _this =

this

;<

/p>

onclick=

>

<

/li>)}

)}<

/ul>

>

第二種方法:this

.liclick1.

bind

(this

)<

/p>

onclick=

>

<

/li>)}

)}<

/ul>

>

第三種方法:在map函式的第二個引數將this傳入<

/p>

onclick=

>

<

/li>)}

,this)}

<

/ul>

>

react中的時間傳參方式<

/h3>

>執行方法進行傳值1

<

/button>

>

}>執行方法進行傳值2

<

/button>

>

}>執行方法進行傳值3

<

/button>

>

react中迴圈時事件的傳值<

/h3>

onclick=

}>

<

/li>)}

)}<

/ul>

>

<

/div>);

}}export

default thiscomponent;

React中context的使用方法

引入react import react,from react 引入樣式 通過下面案例你將領略context的使用方法 使用方法總結 1.先建立乙個context容器物件,可以進行結構provider及consumer方便之後的簡單應用。2.包裹要用的元件,給誰用就在誰的外面包裹,使用屬性關鍵字va...

React的使用方法(腳手架的方法)

使用react加腳手架建立乙個專案 yarn start npx 幫助我們更方便的找到本地安裝的命令 官方 用法 yarn start 匯入核心模組 import react from react import reactdom from react dom 全域性樣式 import index.c...

redux在react中的使用方法(入門級)

在控制台中列印redux const redux require redux console.log redux.createstore 至少傳入乙個函式 reducer 純函式 dispatch 觸發修改狀態的方式 subscribe 訂閱 資料改變,要以何種方式 更新檢視 getstate 獲取...