当前位置：首页 > React

react refs 如何使用

2026-03-30 23:22:12React

React Refs 的基本概念

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

创建 Refs

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

类组件示例：

react refs 如何使用

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

函数组件示例：

function MyComponent() {
  const myRef = React.useRef(null);
  return <div ref={myRef} />;
}

访问 Refs

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

react refs 如何使用

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

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

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

Refs 与回调 Refs

回调 Refs 是一种更灵活的方式，允许在 ref 附加或分离时执行自定义逻辑。

function CallbackRefExample() {
  const setTextInputRef = (element) => {
    if (element) {
      element.focus();
    }
  };

  return <input ref={setTextInputRef} />;
}

转发 Refs

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

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

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