在子组件中定义方法以使用 ref hook - React 本机功能组件

Question

我有 2 个功能组件，假设Parent和Child.然后，我在组件内部doThis()了一个方法Child用于调用某些功能，例如子项中的状态更新。Child组件位于父组件内部，我需要使用它作为引用useRef()钩子并调用doThis()函数。

实现是这样的。

//Component Parent
function Parent(){
const child= useRef()
if(child.current){
child.current.doThis()
}
return( <Child ref={child}/>)
}

function Child({ref}){

// Don't know how to define
function doThis(){
//Do some task
}
return( <View/>)
}

我在反应原生文档中看到了一个名为"方法">的部分。例如：scrollToIndex()FlatList

那么如何使用功能组件定义这样的方法呢？

Answer 1

将引用转发到 DOM 组件

此类组件的示例：

import { TextInput as TextInputNative } from "react-native";
import React from "react";
const TextInput = React.forwardRef(
({ ...props }, ref) => (
<TextInputNative
ref={ref}
{...props}
/>
)
);
export default TextInput;

以下是我稍后如何在代码中使用我的组件：

<TextInput
ref={inputRef}
/>

要创建引用，我使用useRef(null);