React Hooks封裝乙個簡單的錨點固釘的元件

2021-10-01 09:57:42 字數 1372 閱讀 3264

元件封裝的過程中遇到乙個巨大巨大、比坑爹還坑的坑:開發環境中,此元件能如期輸出ui,但在測試環境中部分ui丟失。

某日,在進行codeview的時候,突然發現原來webpack將react的元件名字name給統一壓縮成字母t。原來有這樣一條屬性鏈

元件例項.type.name == 「anchorpane『」,如果專案經過build後,則元件例項.type.name == 「t」,這樣導致filter範圍擴大了。

網上有大牛建議在children子元件anchorpanel中新增 static elementtype = 'anchorpanel』屬性

經測試這個屬性標識不會被webpack壓縮,故能如期輸出ui

import react,

from

'react'

;import

from

'tinper-bee'

import

'./index.less'

const

anchorlink

= props =>`)

; topactiveanchor && anchorref.current.

scrollto()

;},[indx]

)return

"anchor-link" ref=

style=

}>

"link-postion-fiexd" style=

}>

>

/>

<

/li>

= i.props;if(

typeof title !==

'string')項`

;if( props.objtext &&

(typeof props.objtext[anchor]

==='string'

)) title = props.objtext[anchor];}

return

key=

onclick=

>

>

<

/span>

}<

/li>})

}>

'uf-arrow-up-2'

/>

<

/li>

<

/ul>

<

/div>

}export

default anchorlink

.anchor-link }&

.anchor-link-item-active }}

.anchor-link-text

}}

ahooks,乙個 react hooks好用的庫

這幾天重新過了一遍hook,在專案中自定義hook之後發現非常的爽,邏輯層可復用,與檢視分離,找了找文件後發現了這個好用的庫 對react hooks 較為熟練 下面這裡用它的乙個最簡單的demo來說明 const toggletest usetoggle left的值 right的值 return...

dva與react hooks的第乙個demo

剛開始使用dva最陌生的就是像 connect 等這樣的裝飾器語法,後來查詢到是我未知的es6的語法,connect實質上就是react redux中的connect 因為對function component的形式不熟悉,即使換成了export default mapstatetoprops de...

封裝乙個SqliteDataBase工具類

直接上 不廢話 using system using system.collections.generic using system.data using system.data.sqlite using system.linq using system.text using system.thre...