javascript - 如何使用 TypeScript 在 React Native 中使用 forwardRef 和 FunctionComponent

Question

我查看了许多文档和示例，但我似乎仍然不太了解如何使用 forwardRef在 React Native 中使用带有 TypeScript 的功能组件。下面是我创建 MyCustomComponent 的示例使用我尝试通过创建 ref 从父级调用的自定义函数。但是，由于 ref 定义不正确并且 null ，我显然收到一条错误消息，告诉我该函数不存在。请帮助我了解如何正确使用forwardRef在 React Native 中。提前致谢!

interface MyCustomComponentProps {
  title: string
}

const MyCustomComponent: React.FunctionComponent<MyCustomComponentProps> = React.forwardRef((props, ref) => {
  const coolAlert = () => {
    Alert.alert('Hey!', 'This was called from MyCustomComponent')
  }
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  )
})

export default function App () {
  const MyCustomComponentRef = useRef()
  return (
    <SafeAreaView>
      <MyCustomComponent ref={MyCustomComponentRef} title='Hello World' />
      <TouchableOpacity
        onPress={() => {
          MyCustomComponentRef.coolAlert()
        }}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

Answer 1

转发引用
Refs 可能真的很令人困惑，因为有多种方法可以处理它们，而且人们不知道 ref 对象( React.MutableRefObject 或 React.RefObject )和存储在 .current 上的 ref 值之间的区别。 ref 对象的属性。您在这里犯了这个错误，以及一些缺失或不正确的 typescript 类型。useRef<T>是一个通用钩子(Hook)，其中值 T告诉将存储什么类型的值。我们需要告诉 App我们打算用 coolAlert 存储一些东西方法。实际上我们稍后会看到我们需要我们的 ref 是不可变的，所以我们将使用 createRef<T>反而。

interface MyRef {
  coolAlert(): void;
}

const MyCustomComponentRef = createRef<MyRef>();

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

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

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

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

MyCustomComponent 的类型应该是来自 forwardRef 的复杂返回类型.但是我们不需要自己分配那个类型，我们只需要传递泛型 T和 P到 forwardRef函数调用。 T是 ref 和 P 的类型是 Prop 的类型。

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

好的，所以我们 got rid of all the typescript errors !耶!除了……等一下。它实际上并没有做任何事情。所有这些，它仍然不起作用。 我讨厌裁判。裁判很糟糕。
使用引用
我们将引用转发到 MyCustomComponent , 现在可以访问转发的 ref 并可以将其附加到 DOM 组件。但是我们不希望它附加到 DOM 元素上，我们希望它附加到 MyCustomComponent .但我们真的做不到。

By default, you may not use the ref attribute on function components because they don’t have instances [docs]

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

useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef. [docs]

我们必须公开我们的 coolAlert方法通过 useImperativeHandle .

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

现在 it actually works ， 最后!