React Refs 的 TypeScript 进阶指南

React Refs 简介

Refs 是 React 中的一种特殊属性，它允许你访问 DOM 元素并与之交互。Refs 可以用来获取元素的尺寸、位置或其他信息，也可以用来操作元素，例如更改其样式或添加事件监听器。

TypeScript 中的 Refs

在 TypeScript 中，Refs 的类型为 RefObject<T>，其中 T 是 DOM 元素的类型。例如，如果你想获取一个 <div> 元素的引用，你可以使用以下代码：

const myRef = useRef<HTMLDivElement>(null);

然后，你就可以在组件的 render() 方法中使用 myRef 来访问 <div> 元素：

return <div ref={myRef} />;

在函数组件和类组件中使用 Refs

在函数组件中，你可以使用 useRef 钩子来创建和使用 Refs。useRef 钩子返回一个包含 Ref 对象的数组，数组的第一个元素是 Ref 对象本身，数组的第二个元素是 Ref 对象的当前值。

const myRef = useRef<HTMLDivElement>(null);

return <div ref={myRef.current} />;

在类组件中，你可以使用 createRef() 方法来创建 Refs。createRef() 方法返回一个 Ref 对象，你可以将其分配给组件的属性。

class MyComponent extends React.Component {
  myRef = createRef<HTMLDivElement>();

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

在组件之间传递 Refs

你可以使用 forwardRef() 高阶组件在组件之间传递 Refs。forwardRef() 高阶组件创建一个新的组件，该组件将父组件的 Ref 传递给子组件。

const MyForwardedComponent = forwardRef((props, ref) => {
  return <div ref={ref} />;
});

现在，你就可以在父组件中使用 MyForwardedComponent 来传递 Ref：

const myRef = useRef<HTMLDivElement>(null);

return <MyForwardedComponent ref={myRef} />;

总结

Refs 是 React 中一种非常有用的工具，它可以用来访问 DOM 元素并与之交互。在 TypeScript 中，Refs 的类型为 RefObject<T>，其中 T 是 DOM 元素的类型。你可以使用 useRef 钩子在函数组件中创建和使用 Refs，也可以使用 createRef() 方法在类组件中创建 Refs。你还可以使用 forwardRef() 高阶组件在组件之间传递 Refs。