React报错解决之ref返回undefined或null

目录
  • 总览
  • useEffect
  • 事件
  • 总结

总览

当我们试图在其对应的DOM元素被渲染之前访问其current属性时，React的ref通常会返回undefined或者null。为了解决该问题，可以在useEffect钩子中访问ref，或者当事件触发时再访问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()钩子可以传递一个初始值作为参数。该钩子返回一个可变的ref对象，ref对象上的current属性被初始化为传递的参数。

我们没有为useRef传递初始值，因此其current属性设置为undefined。如果我们将null传递给钩子，如果立即访问其current属性，将会得到null。

需要注意的是，我们必须访问ref对象上的current属性，以此来访问设置了ref属性的div元素。

当我们为元素传递ref属性时，比如说，<div ref={myRef} /> ，React将ref对象的.current属性设置为相应的DOM节点。

我们使用useEffect钩子，是因为我们想要确保ref已经设置在元素上，并且元素已经渲染到DOM上。

如果我们尝试在组件中直接访问ref上的current属性，我们会得到undefined，是因为 ref 还没有被设置，而且 div 元素还没有被渲染。

事件

你也可以在事件处理函数中访问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>
  );
}

当用户点击按钮的时候，ref已经被设置好了，相应的元素已经被渲染到DOM中，所以我们能够访问它。

总结

可以在useEffect钩子中访问ref，或者当事件触发时再访问ref。也就是说，要确保元素已经渲染到DOM上。

到此这篇关于React报错解决之ref返回undefined或null的文章就介绍到这了,更多相关React ref返回undefined null内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

附：ref的值根据节点的类型而有所不同

  • 当在refHTML元素上使用该属性时，ref在构造函数中创建的属性将React.createRef()接收底层DOM元素作为其current属性。
  • 在ref自定义类组件上使用该属性时，该ref对象将接收组件的已安装实例作为其current。

您可能无法ref在函数组件上使用该属性，因为它们没有实例。

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当组件安装时，React将为该属性分配DOM元素，并null在卸载时将其分配回。ref更新发生之前componentDidMount或componentDidUpdate生命周期方法。

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

作者：Borislav Hadzhiev

赞 (0)

相关推荐

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • 学习React中ref的两个demo示例

    学习React中ref的两个demo示例

    为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了ref为我们解决这个问题. 为什么不能从组件直接获取Dom? 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它插入文档以后,才会变成真实的 DOM 如果需要从组件获取真实 DOM 的节点,就要用到官方提供的ref属性 使

  • React组件refs的使用详解

    ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现.但是,既然ref有其适用的场景,那也就是说ref自有其优势.关于这一点和ref的适用场景,官方文档中是这样说的: 在从 render 方法中返回 UI 结构之后,你可能想冲出 React 虚拟 DOM 的限制,在 render 返回的

  • React报错解决之ref返回undefined或null

    目录 总览 useEffect 事件 总结 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null.为了解决该问题,可以在useEffect钩子中访问ref,或者当事件触发时再访问ref. import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(); console.log(ref.curre

  • 解决React报错Property 'X' does not exist on type 'HTMLElement'

    目录 总览 类型断言 总结 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLElement'错误.为了解决该错误,在访问属性之前,使用类型断言来正确地类型声明元素. 这里有三个例子来展示错误是如何发生的. // App.tsx import {useEffect} from 'react'; export default function App() { useEf

  • 解决React报错React Hook useEffect has a missing dependency

    目录 总览 禁用规则 依赖移入 依赖移出 useMemo useCallback 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"React Hook useEffect has a missing dependency"警告.为了解决该错误,禁用某一行的eslint规则,或者将变量移动到useEffect钩子内. 这里有个示例用来展示警告是如何发生的. // App.js import React, {useEffect, useState}

  • React报错之Parameter event implicitly has an any type解决

    目录 引言 总览 设置类型 逃生舱any 确定类型 引言 原文链接:bobbyhadz.com/blog/react-… 作者:Borislav Hadzhiev 正文从这开始~ 总览 当我们不在事件处理函数中为事件声明类型时,会产生"Parameter 'event' implicitly has an 'any' type"错误.为了解决该错误,显示地为event参数声明类型. 比如说,在input元素上,将处理change事件声明类型为React.ChangeEvent<H

  • 解决React报错Parameter 'props' implicitly has an 'any' type

    目录 总览 安装类型文件 声明类型 泛型 重新安装 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an 'any' type"错误.为了解决这个错误,在你的组件中明确地为props对象设置一个类型. 安装类型文件 你首先要确定的是你已经安装了React类型声明文件.在项目的根目录下打开终端,并运行以下命令. # ️ with NPM npm install --s

  • 解决React报错Cannot find namespace context

    目录 总览 tsx 安装@types/包 手动添加 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx,并确保为你的应用程序安装所有必要的@types包. 这里有个例子来展示错误是如何发生的. // App.ts import React from 'react'; interface UserCtx { first: stri

  • React报错之Object is possibly null的问题及解决方法

    React报错之Object is possibly null的问题及解决方法

    目录 类型守卫 非空断言 总结 类型守卫 使用类型守卫来解决React中useRef钩子“Object is possibly null”的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef

  • React报错之组件不能作为JSX组件使用的解决方法

    目录 总览 返回单个JSX元素 不要忘记返回值 更新React类型声明 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a va

  • 解决React报错Expected an assignment or function call and instead saw an expression

    目录 正文 显式返回 隐式返回 返回对象 正文 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', 'b', 'c'].map(el

  • 解决React报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

随机推荐