React.forwardRef是什么?它有什么作用?

React.forwardRef 是 React 提供的一个特殊的 API,主要用于将 ref 属性从父组件 “转发”(forward)到子组件。

在 React 中,ref 主要用于获取组件或 DOM 元素的引用,这样我们就可以在需要的时候访问和操作这些组件或元素。然而,由于 React 的 props 传递机制,我们无法直接将 ref 传递给子组件。这就是 React.forwardRef 的作用所在。

举个例子,假设我们有一个 Button 组件,我们希望在父组件中直接获取这个按钮的 DOM 引用。如果不用 React.forwardRef,我们无法直接做到这一点。但如果我们用 React.forwardRef 创建 Button 组件,就可以实现这个目标了:

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

// 在父组件中使用
class ParentComponent extends React.Component {
  myRef = React.createRef();

  componentDidMount() {
    console.log(this.myRef.current); // 这将输出 <button> 的 DOM 节点
  }

  render() {
    return <Button ref={this.myRef}>Click me!</Button>;
  }
}

在这个例子中,React.forwardRef 创建了一个新的 Button 组件,这个组件接收 ref 作为第二个参数,并将其作为 button 元素的属性。然后,在 ParentComponent 中,我们就可以通过 this.myRef.current 来访问这个 button 的 DOM 节点了。

发表评论

后才能评论