设置使用 TextInput 道具的自定义组件类型并使其在 useRef 到组件时工作

Question

我正在创建一个自定义组件，脚本是使用 React 的 Hooks 用 TypeScript 编写的

我的组件将使用我的一些打字稿类型并将其与 TextInput 类型混合（这样我就可以访问 TextInput 道具）

这是我的自定义组件示例代码

import { Animated, Platform, TextInput, TextInputProps, View } from 'react-native'

type PropsType = TextInputProps & { //Or should I using TextInput instead of TextInputProps?
    myCustomProp?: string
}

const CustomTextField = (props: PropsType) => {
    useEffect(() => {
        return () => {
            if(props.onSubmitEditing != undefined) {
                props.onSubmitEditing()
            }
        }
    }, [])

    return (
        <View
            style = {{
            }}
        />
    )
}

export default CustomTextField

然后我将它导入到我的屏幕上并像这样显示它

<CustomTextField
    placeholder = 'Password'
    ref = {passwordInput}
    secureTextEntry
/>

这是我的参考变量

const passwordInput = useRef<typeof CustomTextField>(null)

但是当引用组件时打字稿给我错误

Answer 1

根据文档，您不能在函数组件上使用 ref 属性，因为它们没有实例。

但是最近函数式组件因为 hooks 什么都流行起来了，React 引入了forwardRef。

所以你的子组件代码应该是

export default React.forwardRef((props: CustomProps, ref) => {
  // All other existing code
});

在父组件中，

const passwordInput = useRef<CustomTextField>(null)

<CustomTextField
    placeholder='Password'
    ref={passwordInput}
    secureTextEntry
/>