React報(bào)錯(cuò)解決之ref返回undefined或null

更新時(shí)間：2022年08月03日 12:04:49 作者：chuck

最近使用react做個(gè)滾動(dòng)監(jiān)聽(tīng)獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時(shí)發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下

總覽

當(dāng)我們?cè)噲D在其對(duì)應(yīng)的DOM元素被渲染之前訪問(wèn)其current屬性時(shí)，React的ref通常會(huì)返回undefined或者null。為了解決該問(wèn)題，可以在useEffect鉤子中訪問(wèn)ref，或者當(dāng)事件觸發(fā)時(shí)再訪問(wèn)ref。

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef();

  console.log(ref.current); // ??? undefined here

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ??? element here
  }, []);

  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </div>
  );
}

useEffect

useRef()鉤子可以傳遞一個(gè)初始值作為參數(shù)。該鉤子返回一個(gè)可變的ref對(duì)象，ref對(duì)象上的current屬性被初始化為傳遞的參數(shù)。

我們沒(méi)有為useRef傳遞初始值，因此其current屬性設(shè)置為undefined。如果我們將null傳遞給鉤子，如果立即訪問(wèn)其current屬性，將會(huì)得到null。

需要注意的是，我們必須訪問(wèn)ref對(duì)象上的current屬性，以此來(lái)訪問(wèn)設(shè)置了ref屬性的div元素。

當(dāng)我們?yōu)樵貍鬟fref屬性時(shí)，比如說(shuō)，<div ref={myRef} /> ，React將ref對(duì)象的.current屬性設(shè)置為相應(yīng)的DOM節(jié)點(diǎn)。

我們使用useEffect鉤子，是因?yàn)槲覀兿胍_保ref已經(jīng)設(shè)置在元素上，并且元素已經(jīng)渲染到DOM上。

如果我們嘗試在組件中直接訪問(wèn)ref上的current屬性，我們會(huì)得到undefined，是因?yàn)?ref 還沒(méi)有被設(shè)置，而且 div 元素還沒(méi)有被渲染。

事件

你也可以在事件處理函數(shù)中訪問(wèn)ref的current屬性。

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef();

  console.log(ref.current); // ??? undefined here

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ??? element here
  }, []);

  const handleClick = () => {
    console.log(ref.current); // ??? element here
  };

  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

當(dāng)用戶(hù)點(diǎn)擊按鈕的時(shí)候，ref已經(jīng)被設(shè)置好了，相應(yīng)的元素已經(jīng)被渲染到DOM中，所以我們能夠訪問(wèn)它。

總結(jié)

可以在useEffect鉤子中訪問(wèn)ref，或者當(dāng)事件觸發(fā)時(shí)再訪問(wèn)ref。也就是說(shuō)，要確保元素已經(jīng)渲染到DOM上。

到此這篇關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的文章就介紹到這了,更多相關(guān)React ref返回undefined null內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

附：ref的值根據(jù)節(jié)點(diǎn)的類(lèi)型而有所不同

當(dāng)在refHTML元素上使用該屬性時(shí)，ref在構(gòu)造函數(shù)中創(chuàng)建的屬性將React.createRef()接收底層DOM元素作為其current屬性。
在ref自定義類(lèi)組件上使用該屬性時(shí)，該ref對(duì)象將接收組件的已安裝實(shí)例作為其current。

您可能無(wú)法ref在函數(shù)組件上使用該屬性，因?yàn)樗鼈儧](méi)有實(shí)例。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

current當(dāng)組件安裝時(shí)，React將為該屬性分配DOM元素，并null在卸載時(shí)將其分配回。ref更新發(fā)生之前componentDidMount或componentDidUpdate生命周期方法。

原文鏈接：bobbyhadz.com/blog/react-…

作者：Borislav Hadzhiev

您可能感興趣的文章: