用React 高階元件編寫登入

2021-10-10 14:20:31 字數 1283 閱讀 2979

高階元件:

高階元件是引數為元件,返回值為新元件的函式。

元件是將 props 轉換為 ui,而高階元件是將元件轉換為另乙個元件

const enhancedcomponent =

higherordercomponent

;

所有的onchange應該被抽取出來,然後共享

抽取login和register

1.建立乙個邏輯元件 with-hoc.js

. 高階元件是乙個函式,需要接受乙個引數,返回乙個新元件

render把html渲染到html上面

import react from 'react'

=>

}}

2.login.jsx

這裡input缺失: value,onchange

import react from 'react'

class login extends react.component

}export default login

3.login子元件,with-hoc是父元件

with-hoc:

import react from 'react'

=>

}//這裡statename是變數所以需要乙個中括號括起來

//這裡改變state

onchange=

(statename,statevalue)

=>)}

// 子元件呼叫的方法

userchange=

(name)

=>

//button提交的方法

hanglsubmit=

(e)=

>

=this.state

alert

(`$,$`)

}render()

return

(//將方法和資料以props的方式傳遞過去..

.mapmethod}

>

<

<

/div>)}

}}4.login元件已經接收到了with-hoc以props傳遞過來的東西

這裡onchange=真正繫結的值是裡面return的東西

import react from 'react'

class login extends react.component

=this.props

return

(

React高階元件

想想以前用原生和jquery的專案,上千行的code映入眼簾,瞬間有種昏死過去的衝動。難以維護,改乙個bug可能出現n個bug,真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況,就是兩個元件往往有很多的重...

react高階元件

基本概念 函式可以作為引數被傳遞 函式可以作為返回值輸出 元件作為引數被傳遞,返回值是乙個元件 高階元件是乙個函式 案例 將a元件作為公共元件,bc元件作為a函式的引數,來共享顯示a元件 此處紅框是a元件,紅框裡左邊內容為b元件,右邊內容為c元件 1.建立公共的a元件 將元件a封裝成乙個函式,接收乙...

React 高階元件

高階元件 high order component,hoc 輸入 react 元件 輸出 react 元件 高階元件的作用主要是用來加強元件,通過把基礎元件拆分成很小的粒度,通過高階元件進行增強並返回,以此提高復用性。比如需要開發乙個訊息框,一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...