当前位置：首页 > React

react ref如何使用

2026-02-12 04:51:06React

React Refs 的基本概念

Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常用于需要直接操作 DOM 的场景（如焦点控制、动画触发）或与第三方库集成。

创建 Ref

使用 React.createRef() 或 useRef Hook 创建 ref 对象：

类组件：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

函数组件：

import { useRef } from 'react';
function MyComponent() {
  const myRef = useRef(null);
  return <div ref={myRef} />;
}

访问 Ref 的值

通过 ref.current 获取 DOM 节点或组件实例：

react ref如何使用

function AutoFocusInput() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // 自动聚焦到输入框
  }, []);
  return <input ref={inputRef} />;
}

回调 Refs

通过函数形式动态设置 ref，适用于 ref 对象需要动态变更的场景：

function CallbackRefExample() {
  const setRef = (node) => {
    if (node) {
      node.focus();
    }
  };
  return <input ref={setRef} />;
}

Ref 转发（Forwarding Refs）

通过 React.forwardRef 将 ref 传递给子组件，常用于高阶组件或封装库：

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

function App() {
  const buttonRef = useRef(null);
  return <FancyButton ref={buttonRef}>Click Me</FancyButton>;
}

使用场景与注意事项

典型场景：
- 管理焦点、文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库（如 D3.js）。
避免滥用：
- 优先使用 React 的状态和 props 控制组件行为。
- 避免在渲染期间修改 ref.current，可能导致意外行为。
函数组件限制：
- 函数组件没有实例，除非使用 forwardRef 或 useImperativeHandle 暴露特定方法。

示例：结合 useImperativeHandle

通过 useImperativeHandle 自定义暴露给父组件的 ref 值：

const InputWithFocus = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
  }));
  return <input ref={inputRef} />;
});

function Parent() {
  const inputRef = useRef();
  return (
    <>
      <InputWithFocus ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
}