当前位置：首页 > React

react ref如何使用

2026-03-31 08:07:13React

React Ref 的基本概念

Ref（引用）是 React 中用于直接访问 DOM 节点或 React 组件实例的一种机制。通常用于需要直接操作 DOM 或保存可变值而不触发重新渲染的场景。

创建 Ref

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

react ref如何使用

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

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

绑定 Ref 到 DOM 元素

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

// 类组件中绑定 Ref
class MyComponent extends React.Component {
  render() {
    return <div ref={this.myRef}>Hello</div>;
  }
}

// 函数组件中绑定 Ref
function MyComponent() {
  return <div ref={myRef}>Hello</div>;
}

访问 Ref 的值

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

react ref如何使用

// 类组件中访问 Ref
componentDidMount() {
  console.log(this.myRef.current); // 输出 DOM 节点
}

// 函数组件中访问 Ref
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}>Hello</div>;
}

转发 Refs

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

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

function App() {
  const buttonRef = React.useRef(null);

  React.useEffect(() => {
    console.log(buttonRef.current); // 输出 button DOM 节点
  }, []);

  return <FancyButton ref={buttonRef}>Click me</FancyButton>;
}