转发参考

Refs 可能真的很令人困惑，因为有多种方法可以处理它们，而且人们不知道 ref 对象（React.MutableRefObject或React.RefObject）和 ref 值之间的区别，该值存储在.currentref 对象的属性中。你在这里犯了那个错误，以及一些丢失或不正确的typescript类型。

useRef<T>是一个通用钩子，其中的值T表明将存储什么类型的值。我们需要App说明我们打算用一个coolAlert方法存储一些东西。实际上我们稍后会看到我们需要我们的 ref 是不可变的，所以我们将使用它createRef<T>。

interface MyRef {
  coolAlert(): void;
}

const MyCustomComponentRef = createRef<MyRef>();

当我们调用 时onPress，我们需要访问 ref 对象的当前值。通过将泛型添加到createRef，typescript已经知道这个值是MyRef或undefined。我们可以coolAlert使用可选的链接?.运算符进行调用。

onPress={() => MyCustomComponentRef.current?.coolAlert()}

现在我们需要做一些工作MyCustomComponent。您将类型分配给它是错误的，React.FunctionComponent<MyCustomComponentProps>因为函数组件不具备我们需要的关于 ref 转发的知识。

function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

for 的类型MyCustomComponent应该是来自forwardRef. 但是，我们并不需要这种类型的分配自己，我们只需要通过仿制药T，并P给forwardRef函数调用。 T是 refP的类型，是 props 的类型。

const MyCustomComponent = React.forwardRef<MyRef, MyCustomComponentProps>(...

好的，我们摆脱了所有typescript错误！耶！除了……等等。它实际上没有做任何事情。所有这一切，它仍然不起作用。 我讨厌裁判。参考是坏的。

使用参考

我们将 ref 转发给MyCustomComponent，他现在可以访问转发的 ref 并且可以将其附加到 DOM 组件。但是我们不希望它附加到 DOM 元素，我们希望它附加到MyCustomComponent. 但我们真的不能那样做。

默认情况下，您不能在函数组件上使用 ref 属性，因为它们没有实例[docs]

我们必须使用一个叫做 hook 的钩子useImperativeHandle，它感觉像是一个黑客解决方案，甚至文档都说“不要这样做”。是的，我讨厌裁判。

useImperativeHandle 自定义在使用 ref 时暴露给父组件的实例值。与往常一样，在大多数情况下应该避免使用 refs 的命令式代码。useImperativeHandle 应该与 forwardRef 一起使用。[文档]

我们必须coolAlert通过useImperativeHandle.

useImperativeHandle(ref , () => ({coolAlert}));

现在它真的有效了，终于！