在 React 中，refs（引用）是一个特殊的属性，它允许我们直接访问 DOM 元素或类组件的实例。refs 用于访问某些子组件的 DOM 元素或方法，而不需要通过状态（state）来传递数据或控制行为。通常，refs 在以下场景下非常有用：

  • 获取 DOM 元素的引用，以便进行低级的操作，例如焦点管理、文本选择、动画控制等。
  • 与第三方库或原生 JavaScript 集成时，需要访问 DOM 元素。
  • 在表单处理过程中，直接操作输入字段。

React 提供了 React.createRef() 和 useRef() 来创建引用。

目录

  1. React 创建和使用 Ref
  2. Refs 与类组件
  3. Refs 与函数组件
  4. 修改 DOM 的焦点
  5. 使用 Refs 与第三方库
  6. 参考资料

1. React 创建和使用 Ref

1.1 在类组件中使用 ref

在类组件中，ref 通过 React.createRef() 创建。然后，可以通过 this.ref 访问该引用。

示例：类组件中的 ref

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 创建 ref
    this.inputRef = React.createRef();
  }

  handleClick = () => {
    // 访问 ref
    this.inputRef.current.focus();  // 让输入框获得焦点
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleClick}>点击聚焦</button>
      </div>
    );
  }
}

export default MyComponent;

解释：

  • this.inputRef = React.createRef()：创建一个引用。
  • this.inputRef.current：访问当前的 DOM 元素。
  • this.inputRef.current.focus()：让输入框获得焦点。

2. Refs 与类组件

在类组件中，refs 可以用于访问 DOM 元素，也可以访问类组件的实例。

示例：访问类组件实例

import React, { Component } from 'react';

class ChildComponent extends Component {
  sayHello() {
    alert('Hello from Child!');
  }

  render() {
    return <div>Child Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // 创建 ref
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // 调用子组件的方法
    this.childRef.current.sayHello();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

解释：

  • 在父组件中，通过 this.childRef = React.createRef() 创建对子组件的引用。
  • 通过 this.childRef.current.sayHello() 调用子组件的方法。

3. Refs 与函数组件

在函数组件中，React 提供了 useRef() 钩子来创建引用。useRef 具有与 createRef 相同的功能，但适用于函数组件。

示例：函数组件中的 useRef

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();  // 让输入框获得焦点
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>点击聚焦</button>
    </div>
  );
}

export default MyComponent;

解释：

  • const inputRef = useRef()：在函数组件中创建 ref。
  • inputRef.current：访问 DOM 元素并调用 focus() 方法。

4. 修改 DOM 的焦点

ref 最常用的场景之一是操作 DOM 元素，例如获取元素的焦点。

示例：自动获取焦点

import React, { useEffect, useRef } from 'react';

function AutoFocusInput() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();  // 在组件加载后自动聚焦
  }, []);

  return (
    <input ref={inputRef} type="text" />
  );
}

export default AutoFocusInput;

解释：

  • 使用 useEffect 在组件加载时自动获取焦点。
  • inputRef.current.focus()：让输入框获得焦点。

5. 使用 Refs 与第三方库

有时你可能需要将 React 与第三方 DOM 库一起使用，例如 jQuery 或其他原生 JS 库。这时 refs 很有用，它可以让你直接访问 DOM 元素并与这些库交互。

示例：使用 refs 与 jQuery 插件

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';

function MyComponent() {
  const divRef = useRef();

  useEffect(() => {
    // 使用 jQuery 插件操作 DOM
    $(divRef.current).fadeIn();
  }, []);

  return <div ref={divRef}>Hello, world!</div>;
}

export default MyComponent;

解释：

  • 通过 ref 获取 div 元素，传递给 jQuery 操作。
  • useEffect 钩子确保在组件加载后进行操作。

6. 参考资料

出站链接

站内链接

React refs 是直接访问和操作 DOM 元素或子组件实例的一个重要工具。它在表单处理、与第三方库集成以及低级 DOM 操作中非常有用。在大多数情况下，React 推荐使用受控组件的方式来处理数据和状态，但 refs 依然是不可忽视的重要特性。