react ref current 组件内的类型

在React中，`current`属性通常与`useRef`或`forwardRef`一起使用。当你在函数式组件中使用`useRef`时，它返回一个对象，其中的`current`属性默认是`null`，直到你在组件内部首次设置一个非`null`值，如这样：

const inputRef = useRef(null); // 初始化为null
<input type="text" ref={inputRef} />

当`inputRef.current`被访问时，它会指向你传递给`ref`属性的实际DOM元素。如果你使用`forwardRef`将`ref`传递给内联组件，`current`的类型取决于那个组件的`HTMLInputElement`或任何其他可引用的元素。

对于`useImperativeHandle`，它允许你自定义组件实例的某些行为，使其看起来像是具有特定接口的对象，即使这个接口实际上不是由组件直接提供的。这可以用于隐藏或封装组件的一些实现细节。例如：

function CustomInput forwardedRef({ ref }) {
  const customRef = useImperativeHandle(ref, () => ({
    focus: () => { /* 自定义聚焦逻辑 */ },
  }));
  return <input ref={customRef} />;
}

// 在父组件中使用
<CustomInput />

在这个例子中，`customRef.focus()`的行为是自定义的，但外部并不知道这是如何实现的。