React報錯Function?components?cannot?have?string?refs
總覽
當(dāng)我們在一個函數(shù)組件中使用一個字符串作為ref
時,會產(chǎn)生"Function components cannot have string refs"錯誤。為了解決該錯誤,使用useRef()
鉤子來得到一個可變的ref
對象,這樣你就可以在組件中作為ref
使用。
這里有個示例用來展示錯誤是如何發(fā)生的。
// App.js export default function App() { // A string ref has been found within a strict mode tree. // ?? Function components cannot have string refs. // We recommend using useRef() instead. return ( <div> <input type="text" id="message" ref="msg" /> </div> ); }
上述代碼片段的問題在于,我們使用了字符串作為ref
。
useRef
為了解決該錯誤,使用useRef
鉤子來獲取可變的ref
對象。
// App.js import {useEffect, useRef} from 'react'; export default function App() { const refContainer = useRef(null); useEffect(() => { // ??? this is reference to input element console.log(refContainer.current); refContainer.current.focus(); }, []); return ( <div> <input type="text" id="message" ref={refContainer} /> </div> ); }
useRef()
鉤子可以被傳遞一個初始值作為參數(shù)。該鉤子返回一個可變的ref
對象,其.current
屬性被初始化為傳遞的參數(shù)。
需要注意的是,我們必須訪問ref
對象上的current
屬性,以獲得對我們設(shè)置了ref
屬性的input
元素的訪問。
當(dāng)我們傳遞ref
屬性到元素上時,比如說,<input ref={myRef} />
。React將ref
對象上的.current
屬性設(shè)置為相應(yīng)的DOM節(jié)點。
useRef
鉤子創(chuàng)建了一個普通的JavaScript對象,但在每次渲染時都給你相同的ref
對象。換句話說,它幾乎是一個帶有.current
屬性的記憶化對象值。
不會重新渲染
應(yīng)該注意的是,當(dāng)你改變ref
的current
屬性的值時,不會引起重新渲染。
例如,一個ref
不需要包含在useEffect
鉤子的依賴數(shù)組中,因為改變它的current
屬性不會引起重新渲染。
// App.js import {useEffect, useRef} from 'react'; export default function App() { const refContainer = useRef(null); const refCounter = useRef(0); useEffect(() => { // ??? this is reference to input element console.log(refContainer.current); refContainer.current.focus(); // ??? incrementing ref value does not cause re-render refCounter.current += 1; console.log(refCounter.current); }, []); return ( <div> <input type="text" id="message" ref={refContainer} /> </div> ); }
例子中的useEffect
鉤子只運行了2次,因為useRef
在其內(nèi)容發(fā)生變化時并沒有通知我們。
改變對象的current
屬性并不會導(dǎo)致重新渲染。
以上就是React報錯Function components cannot have string refs的詳細內(nèi)容,更多關(guān)于React報錯Function components cannot have string refs的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
react純函數(shù)組件setState更新頁面不刷新的解決
在開發(fā)過程中,經(jīng)常遇到組件數(shù)據(jù)無法更新,本文主要介紹了react純函數(shù)組件setState更新頁面不刷新的解決,感興趣的可以了解一下2021-06-06完美解決react-codemirror2?編輯器需點擊一下或者延時才顯示數(shù)據(jù)的問題
這篇文章主要介紹了react-codemirror2編輯器需點擊一下或者延時才顯示數(shù)據(jù)的問題,解決方法也很簡單,需要手動引入自動刷新的插件,配置一下參數(shù)就可以了,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-08-08關(guān)于react hook useState連續(xù)更新對象的問題
這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對象的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03React引入css的幾種方式及應(yīng)用小結(jié)
這篇文章主要介紹了React引入css的幾種方式及應(yīng)用小結(jié),操作styled組件的樣式屬性,可在組件標簽上定義屬性、也可以通過attrs定義屬性,本文通過實例代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03React+Typescript創(chuàng)建項目的實現(xiàn)步驟
通過React組件庫和TypeScript的強類型特性,開發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗和穩(wěn)定性的Web應(yīng)用程序,本文主要介紹了React+Typescript創(chuàng)建項目的實現(xiàn)步驟,感興趣的可以了解一下2023-08-08