当前位置：首页 > wzjs >正文

网站搭建与推广北京seo优化服务

wzjs 2025/8/12 6:56:41

网站搭建与推广,北京seo优化服务,网站项目建设方案文档,你会怎么做外国的网站目录 1. ref 的基本概念2. 如何使用 ref2.1 基本用法2.2 类组件使用 createRef 3. forwardRef 转发 ref4. ref 的应用场景5. ref 和函数组件总结在 React 中，ref（引用）用于访问 DOM 元素或类组件实例。它允许我们直接与元素进行交互&#xf…

1. ref 的基本概念

React 中的 ref 主要有两种类型：

字符串 ref：React 16.3 之前的用法，已经被废弃，不推荐使用。
回调 ref：提供一个函数，将 ref 作为参数传递给该函数。可以访问 DOM 元素或组件实例。
createRef()或者useRef()：推荐的现代用法，允许创建一个 ref 对象，该对象可以用于访问 DOM 元素或类组件实例。

2. 如何使用 ref

2.1 基本用法

函数组件为例：

import React, { useRef, useEffect } from 'react';const MyComponent = () => {const myRef = useRef<HTMLInputElement>(null);useEffect(() => {if (myRef.current) {myRef.current.focus(); // 聚焦到 input 元素}}, []);return <input ref={myRef} />;
};export default MyComponent;

在这个例子中，我们使用了 useRef 钩子创建一个 ref，并将它传递给一个 <input> 元素。这样，myRef.current 就指向该 input 元素，我们可以在 useEffect 中直接操作 DOM。

这里有一个技巧，前面提过 ref 支持接收回调函数，因此我们可以让代码更加简洁：

import React, { useCallback } from 'react';const MyComponent = () => {const myRef = useCallback((node) => node?.focus(), [])return <input ref={myRef} />;
};export default MyComponent;

它的工作原理如下：

当 DOM 节点添加到屏幕时，React 会以 DOM 节点作为参数调用该函数。
当 DOM 节点被移除时，React 会以 null 调用该函数。

2.2 类组件使用 createRef

在类组件中，我们通常使用 React.createRef() 来创建 ref。

import React, { Component } from 'react';class MyComponent extends Component {private myRef = React.createRef<HTMLInputElement>();componentDidMount() {if (this.myRef.current) {this.myRef.current.focus();}}render() {return <input ref={this.myRef} />;}
}export default MyComponent;

3. forwardRef 转发 ref

如果你要在函数组件中使用 ref，并且希望该 ref 被传递到子组件中，你需要使用 React.forwardRef 来转发 ref。

import React, { forwardRef, useImperativeHandle, useRef } from 'react';interface CustomInputProps {label: string;
}const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props, ref) => {const inputRef = useRef<HTMLInputElement>(null);// 允许父组件操作子组件的方法useImperativeHandle(ref, () => ({focus: () => {if (inputRef.current) {inputRef.current.focus();}}}));return (<div><label>{props.label}</label><input ref={inputRef} /></div>);
});export default CustomInput;

在这个例子中，CustomInput 是一个函数组件，它通过 forwardRef 接收外部的 ref。我们通过 useImperativeHandle 将自定义的方法（如 focus）暴露给父组件。

在父组件使用时：

import React, { useRef } from 'react';
import CustomInput from './CustomInput';const ParentComponent = () => {const inputRef = useRef<{ focus: () => void }>(null);return (<div><CustomInput ref={inputRef} label="Username" /><button onClick={() => inputRef.current?.focus()}>Focus Input</button></div>);
};export default ParentComponent;