this迷失
由於react
開發的靈活性,在元件屬性傳遞時,操作函式也常常作為屬性被傳遞進去。由於未使用使用箭頭函式造成函式在執行時根據上下文確定this
指標的值,常常造成this is undefined
的問題。
import react,
from
'react'
;export
default button extends
component
=this
.props
if(onclick)
}render()
>確認<
/button>}}
// onclick作為屬性傳遞是特別需要注意,當函式內部使用this指標的值時,有可能會存在this迷失的問題
dom xss
在前端的server
進行html
檔案的拼裝時,尤其是需要函式寫入script
標籤的內容時需要特別注意,需要對寫入的內容做校驗,如果存在html
語義標籤時可能存在dom xss
的風險。
const jscontent =
fetchfromserver()
// ejs進行內容寫入
window.globalvar =
json
.stringify
(jscontent)
<
/script>
// 此時需要注意如果jscontent包含html語義標籤時可能會造成漏洞,如jscontent = , 組裝好的html檔案放回前端時就會執行報錯
// 使用htmlencode對html語義內容進行encode
const
htmlencode
=(html)
=>
safari文字選擇高度計算問題const
getselectionrectheight=(
)=>
}return nativeselectionrange.
getboundingclientrect()
}}
react元件銷毀單例內容的坑
專案中使用乙個全域性的svg
的圖示庫,因此封裝了乙個svg
圖示元件,而圖示元件在使用時銷毀報錯,原因時this.svgele
與this.styleele
並未在document.body
和document.head
內不是其子元素因此使用removechild
函式時會報錯。
// svgsymbols.tsx元件,全域性注入svg庫與樣式檔案
import react from
'react'
;// 獲取瀏覽器全域性globalthis並在其上掛載__svg__symbols__loaded屬性標識是否已經全域性載入過svg庫
import loadedmanager from
'./loaded-manager'
import
svg_content
from
'!!raw-loader!svg-symbols.svg'
;import
style_content
from
'!!raw-loader!svg-symbols.css'
;export
default svgsymbols extends
react.purecomponent
private
generatestylecontent()
componentdonemount()
}componentwillunmount()
}render()
}// svgicon.tsx元件載入生成對應的svg圖示
import react from
'react'
;import svgsymbols from
'./svgsymbols'
export eunm svgiconsize
inte***ce
svgiconprops
extends
react.htmlattributes
export
default svgicon extends
react.purecomponent
=this
.props
return
(<
>
>
/>
<
/svg>
<
/span>
<
/>)}
}
該元件看起來沒有問題但是如果使用map
函式生成全域性過個svgicon
進行使用時,在元件進行銷毀時,我們知道其中乙個svgsymbols
元件的componentwillunmount
會頁面中移除全域性插入的svg
內容,那麼其他元件的componentwillunmount
將會報錯,因為this.svgcontainerele
與this.stylecontainerele
元素並未插入到頁面中,因此其也不是body
與head
的子元素,因此呼叫removechild
函式會報錯。
// 增加判斷邏輯進行remove
if(document.body.
contains
(this
.stylecontainerele))if
(document.head.
contains
(this
.stylecontainerele)
)
優化可以使用乙個loadedmanager
進行單例模式的注入與刪除而無需在單寫乙個svgsymbols
元件。 TypeScript踩坑(持續更新)
很多第三方庫已經有自己的型別宣告檔案,比如 types react,types react native,這些需要單獨安裝,而例如mobx react和mobx這種會自帶型別檔案,不需要單獨安裝。我們最近有個新專案,需要照顧到不同同學,有的願意用ts,有的不想用ts,為了照顧到雙方,所有的公共模組都...
踩過的坑,持續更新
1 top竟然是dom中的保留字,和window乙個型別的東西,當初還很2b的設定var top 2 innerhtml的問題,在xhtml中要求符合標準格式才能成功,比如我遇到的是在乙個p元素中,再插入p就是非法的。還要注意ie下面的某些元素唯讀,如等。3 偷懶用var a b c null 會怎...
python踩的坑(持續更新)
使用threadpoolexecutor執行緒池,並使用submit提交呼叫函式 開始呼叫寫法 from concurrent.futures import threadpoolexecutor from concurrent import futures pool threadpoolexecut...