当前位置：首页 > React

react ref 如何使用

2026-02-26 16:51:29React

React Ref 的基本概念

Ref 是 React 提供的一种直接访问 DOM 节点或 React 组件实例的方式。通常用于处理表单焦点、动画触发或与第三方 DOM 库集成等场景。

创建 Ref

使用 React.createRef() 或 useRef Hook 创建 Ref。类组件中使用 createRef，函数组件中使用 useRef。

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

// 函数组件
function MyComponent() {
  const myRef = React.useRef(null);
}

绑定 Ref 到 DOM 元素

通过 ref 属性将 Ref 绑定到 DOM 元素或类组件实例。

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

// 函数组件
return <div ref={myRef}>Content</div>;

访问 Ref 的值

通过 Ref 的 current 属性访问绑定的 DOM 节点或组件实例。

// 类组件
componentDidMount() {
  console.log(this.myRef.current); // 获取 DOM 节点
}

// 函数组件
React.useEffect(() => {
  console.log(myRef.current); // 获取 DOM 节点
}, []);

Ref 与函数组件

默认情况下，函数组件不能直接绑定 Ref，需要使用 forwardRef 转发 Ref。

const FunctionComponent = React.forwardRef((props, ref) => {
  return <div ref={ref}>Forwarded Ref</div>;
});

// 使用
function Parent() {
  const ref = React.useRef(null);
  return <FunctionComponent ref={ref} />;
}

回调 Ref

通过回调函数的形式绑定 Ref，适用于动态绑定或 Ref 变化时执行逻辑的场景。

function CallbackRefExample() {
  const [ref, setRef] = React.useState(null);

  const handleRefChange = (node) => {
    setRef(node);
    if (node) {
      console.log("Ref updated:", node);
    }
  };

  return <div ref={handleRefChange}>Callback Ref</div>;
}

Ref 的最佳实践

避免过度使用 Ref，优先使用 React 的状态和 props 管理 UI。Ref 适用于必须直接操作 DOM 或组件实例的场景，如聚焦输入框或触发动画。

function FocusInput() {
  const inputRef = React.useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}