日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React報錯Function?components?cannot?have?string?refs_React

作者：chuck ? 更新時間： 2023-01-15 編程語言

總覽

當我們在一個函數組件中使用一個字符串作為ref時，會產生"Function components cannot have string refs"錯誤。為了解決該錯誤，使用useRef()鉤子來得到一個可變的ref對象，這樣你就可以在組件中作為ref使用。

這里有個示例用來展示錯誤是如何發生的。

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

需要注意的是，我們必須訪問ref對象上的current屬性，以獲得對我們設置了ref屬性的input元素的訪問。

當我們傳遞ref屬性到元素上時，比如說，<input ref={myRef} /> 。React將ref對象上的.current屬性設置為相應的DOM節點。

useRef鉤子創建了一個普通的JavaScript對象，但在每次渲染時都給你相同的ref對象。換句話說，它幾乎是一個帶有.current屬性的記憶化對象值。

不會重新渲染

應該注意的是，當你改變ref的current屬性的值時，不會引起重新渲染。

例如，一個ref不需要包含在useEffect鉤子的依賴數組中，因為改變它的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在其內容發生變化時并沒有通知我們。

改變對象的current屬性并不會導致重新渲染。

原文鏈接：https://juejin.cn/post/7176261947384397880

欄目分類
最近更新