当前位置：首页 > React

react refs 如何使用

2026-02-26 06:21:14React

React Refs 的基本概念

Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常用于处理焦点、媒体播放、动画或与第三方 DOM 库集成。

创建 Refs

使用 React.createRef() 创建 ref，并将其附加到 React 元素的 ref 属性。ref 的值根据节点的类型而有所不同：

HTML 元素：ref 接收底层 DOM 元素。
类组件：ref 接收组件的挂载实例。
函数组件：默认不支持 ref，需使用 forwardRef 或将其转换为类组件。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

访问 Refs

通过 ref 的 current 属性访问节点或组件实例：

componentDidMount() {
  const node = this.myRef.current;
  // 对 DOM 节点或组件实例进行操作
}

回调 Refs

另一种方式是使用回调函数而非 createRef()。回调接收 DOM 元素或组件实例作为参数：

class MyComponent extends React.Component {
  setRef = (element) => {
    this.myRef = element;
  };

  render() {
    return <div ref={this.setRef} />;
  }
}

Refs 与函数组件

函数组件默认不支持 ref，需使用 React.forwardRef 转发 ref：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy-button">
    {props.children}
  </button>
));

// 使用 ref
const ref = React.createRef();
<FancyButton ref={ref}>Click me</FancyButton>;

使用场景示例

聚焦输入框：


class AutoFocusInput extends React.Component {
inputRef = React.createRef();

componentDidMount() { this.inputRef.current.focus(); }

render() { return ; } }


2. 控制视频播放：
```jsx
class VideoPlayer extends React.Component {
  videoRef = React.createRef();

  handlePlay = () => {
    this.videoRef.current.play();
  };

  render() {
    return (
      <div>
        <video ref={this.videoRef} src="video.mp4" />
        <button onClick={this.handlePlay}>Play</button>
      </div>
    );
  }
}