快捷導(dǎo)航

React報(bào)錯(cuò)Function?components?cannot?have?string?refs

更新時(shí)間：2022年12月16日 08:43:38 作者：chuck

這篇文章主要為大家介紹了React報(bào)錯(cuò)Function?components?cannot?have?string?refs解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們?cè)谝粋€(gè)函數(shù)組件中使用一個(gè)字符串作為ref時(shí)，會(huì)產(chǎn)生"Function components cannot have string refs"錯(cuò)誤。為了解決該錯(cuò)誤，使用useRef()鉤子來(lái)得到一個(gè)可變的ref對(duì)象，這樣你就可以在組件中作為ref使用。

這里有個(gè)示例用來(lái)展示錯(cuò)誤是如何發(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>
  );
}

上述代碼片段的問(wèn)題在于，我們使用了字符串作為ref。

useRef

為了解決該錯(cuò)誤，使用useRef鉤子來(lái)獲取可變的ref對(duì)象。

// 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()鉤子可以被傳遞一個(gè)初始值作為參數(shù)。該鉤子返回一個(gè)可變的ref對(duì)象，其.current屬性被初始化為傳遞的參數(shù)。

需要注意的是，我們必須訪(fǎng)問(wèn)ref對(duì)象上的current屬性，以獲得對(duì)我們?cè)O(shè)置了ref屬性的input元素的訪(fǎng)問(wèn)。

當(dāng)我們傳遞ref屬性到元素上時(shí)，比如說(shuō)，<input ref={myRef} /> 。React將ref對(duì)象上的.current屬性設(shè)置為相應(yīng)的DOM節(jié)點(diǎn)。

useRef鉤子創(chuàng)建了一個(gè)普通的JavaScript對(duì)象，但在每次渲染時(shí)都給你相同的ref對(duì)象。換句話(huà)說(shuō)，它幾乎是一個(gè)帶有.current屬性的記憶化對(duì)象值。

不會(huì)重新渲染

應(yīng)該注意的是，當(dāng)你改變ref的current屬性的值時(shí)，不會(huì)引起重新渲染。

例如，一個(gè)ref不需要包含在useEffect鉤子的依賴(lài)數(shù)組中，因?yàn)楦淖兯?code>current屬性不會(huì)引起重新渲染。

// 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鉤子只運(yùn)行了2次，因?yàn)?code>useRef在其內(nèi)容發(fā)生變化時(shí)并沒(méi)有通知我們。

改變對(duì)象的current屬性并不會(huì)導(dǎo)致重新渲染。

以上就是React報(bào)錯(cuò)Function components cannot have string refs的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)Function components cannot have string refs的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: