React报错之Function components cannot have string refs

react,报错,function,components,cannot,have,string,refs · 浏览次数 : 343

小编点评

**错误原因:** 在函数组件中使用字符串作为 `ref` 属性会导致 `Function components cannot have string refs` 错误,因为字符串不是可作为 ref 的数据类型。 **解决方案:** 使用 `useRef()`钩子来获取可变的 ref 对象。`useRef()` 函数接受一个初始值作为参数,并返回一个 ref 对象,其 `current` 属性将初始化为传入的初始值。 **示例代码:** ```javascript import React, { useRef } from 'react'; const App = () => { const refContainer = useRef(null); useEffect(() => { console.log(refContainer.current); refContainer.current.focus(); }, []); return (
); }; export default App; ``` **注意:** * `useRef()` 只能在 `useEffect` 或 `useMemo` 中使用。 * `ref` 属性的值必须是 DOM 元素的 DOM 元素。 * `useRef()` 创建了一个不可变的 ref 对象,即使 `refContainer` 的值发生变化,对象仍然保持不变。

正文

总览

当我们在一个函数组件中使用一个字符串作为ref时,会产生"Function components cannot have string refs"错误。为了解决该错误,使用useRef()钩子来得到一个可变的ref对象,这样你就可以在组件中作为ref使用。

function-components-cannot-have-string-refs.png

这里有个示例用来展示错误是如何发生的。

// 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属性的记忆化对象值。

不会重新渲染

应该注意的是,当你改变refcurrent属性的值时,不会引起重新渲染。

例如,一个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属性并不会导致重新渲染。

与React报错之Function components cannot have string refs相似的内容:

React报错之Function components cannot have string refs

总览 当我们在一个函数组件中使用一个字符串作为ref时,会产生"Function components cannot have string refs"错误。为了解决该错误,使用useRef()钩子来得到一个可变的ref对象,这样你就可以在组件中作为ref使用。 这里有个示例用来展示错误是如何发生的

React报错之Element type is invalid

总览 产生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"错误有多个原因: 在导入组件时,将默

React报错之Too many re-renders

总览 产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因: 在一个组件的渲染方法中调用一个设置状态的函数。 立即调用一个事件处理器,而不是传递一个函数。 有一

React报错之React.Children.only expected to receive single React element child

总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误,将所有元素包装在一个React片段或一个封闭div中。 这里有个

React + Springboot + Quartz,从0实现Excel报表自动化

一、项目背景 企业日常工作中需要制作大量的报表,比如商品的销量、销售额、库存详情、员工打卡信息、保险报销、办公用品采购、差旅报销、项目进度等等,都需要制作统计图表以更直观地查阅。但是报表的制作往往需要耗费大量的时间,即使复用制作好的报表模版,一次次周期性对数据的复制粘贴操作也很耗人,同时模版在此过程

如何使用Java + React计算个人所得税?

**前言** 在报表数据处理中,Excel公式拥有强大而多样的功能,广泛应用于各个业务领域。无论是投资收益计算、财务报表编制还是保险收益估算,Excel公式都扮演着不可或缺的角色。传统的做法是直接依赖Excel来实现复杂的业务逻辑,并生成相应的Excel文件。因此只需在预设位置输入相应参数,Exce

使用SpringBoot+React搭建一个Excel报表平台

> 摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:[葡萄城官网](https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 # 前言 Excel报表平台是一款功能强大、操作简单的系统平台,可以帮助用户上传、编辑和分析

项目实战:在线报价采购系统(React +SpreadJS+Echarts)

小伙伴们对采购系统肯定不陌生,小到出差路费、部门物资采购;大到生产计划、原料成本预估都会涉及到该系统。 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助。 但是对于大多数制造业企业而言,具有企业级整体视角的管理人才仍然难得,系统化的思考方式、解决复杂业务管理

日常工作中需要避免的9个React坏习惯

前言 React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法。这些不佳的习惯可能导致性能下降、代码难以维护,以及其他问题。在本文中,我们将探讨日常工作中应该避免的9个坏React习惯,并提供相关示例代码来说明这些问题以及如

深入理解 React 的 useSyncExternalStore Hook

深入理解 React 的 useSyncExternalStore Hook 大家好,今天我们来聊聊 React 18 引入的一个新 Hook:useSyncExternalStore。这个 Hook 主要用于与外部存储同步状态,特别是在需要确保状态一致性的场景下非常有用。本文将深入探讨这个 Hoo