当前位置：首页 > React

react refs 如何使用

2026-02-11 20:20:08React

React Refs 的基本概念

Refs 提供了一种直接访问 DOM 节点或 React 组件实例的方式。通常在需要直接操作 DOM 或调用组件方法时使用。

创建 Refs

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

类组件示例：

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 如何使用

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

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

回调 Refs

另一种方式是使用回调函数形式的 ref，适用于动态设置 ref 的场景。

function MyComponent() {
  const setRef = (node) => {
    if (node) {
      console.log(node); // 直接获取 DOM 节点
    }
  };
  return <div ref={setRef} />;
}

转发 Refs（Forwarding Refs）

通过 React.forwardRef 将 ref 传递给子组件，适用于高阶组件或封装库的场景。

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

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