reactjs - React TypeScript 类型提示自动完成不适用于 Visual Studio Code 中的 React.forwardRef

Question

对于普通的 React 组件，我可以看到组件 props 的正确自动完成，如下所示：

但是我尝试创建一个React.forwardRef像下面这样的组件，它不起作用，知道吗？

export default React.forwardRef<unknown, BaseModalProps & FeedbackDetailsContentProps>((props: BaseModalProps & FeedbackDetailsContentProps, ref) => {
  return (
    <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
      <FeedbackDetailsContent {...props} />
    </BaseModal>
  );
});

Answer 1

您应该替换unknown为指定的 HTML 元素类型，例如。HTMLInputElement, 并且指定的类型props也是不必要的。

Answer 2

实际上，您的问题与 VSCode 无关，我的意思是编程问题，尤其是开发领域与 Editor/IDE 根本无关。

让我们像这样编写代码：

type ModalProps = BaseModalProps & FeedbackDetailsContentProps;

const Modal = (props: ModalProps, ref: any) => (
  <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
    <FeedbackDetailsContent {...props} />
  </BaseModal>
);

export default React.forwardRef<unknown, ModalProps>(Modal);

Answer 3

在将 TextInput Ref 传递给子组件时，我曾经在子组件中使用 forwardRef 捕获 ref。但是这里我没有在子组件中使用forwardRef，虽然我已经导入了。我正在使用最新的 React 和 React Native 包。

    import React, {forwardRef} from "react";
    
    export interface TextInput_Write_A_Comment_In_Comment_Props{
    
        t_Width: number,
        t_Height: number,
        onChange__Comments:(some_input_string:string)=>void
        comment_post:()=>void,
        android_KeyBoard_Focused__onPressIn__testing_1:(nativeEvent: any)=>void,
        TextInput_commentRef:  React.RefObject<TextInput>,
    
    }
    
    const TextInput_Write_A_Comment_In_Comment: React.FC<TextInput_Write_A_Comment_In_Comment_Props> = (
        props: TextInput_Write_A_Comment_In_Comment_Props,
        )=> {
    
        const Text_Input__Editing_comment_State: string = useAppSelector(editing__comment_string_for_Tagging);
    
        return (
    
            <View style={{
                flexDirection: 'column',
                height: props.t_Height/12,
                width:  props.t_Width,
            }}>
                <View style={{
                //    ----__-_-whatever----__-_-
                }}>
    
    
    
                    <TextInput
    
                        style={{
                            ...TextInput_Write_A_Comment_In_Comment_Styles.commentInput,
                            color: 'black',
                        }}
                        placeholder="Write a comment..."
                        autoFocus={false}
    
                        ref = {props.TextInput_commentRef}
    
                        onSubmitEditing= {Keyboard.dismiss}
    
                        autoCapitalize="none"
                        keyboardType="default"
    
                        onChangeText= {(feedTextInputValue: string) => props.onChange__Comments(feedTextInputValue)}
    
                        value= {Text_Input__Editing_comment_State}
    
                        onPressIn= {props.android_KeyBoard_Focused__onPressIn__testing_1}
                        maxLength={244} //250 ,244 otherwise may not invoke the alert message.
                        
                    />
    
                    <View style={{
                         //    ----__-_-whatever----__-_-
    
                    }}
                    >
                        <TouchableOpacity
                            onPress={ () => Alert.alert('not implemented yet')}>
                            <Icon
                                size={40}
                                style= {TextInput_Write_A_Comment_In_Comment_Styles.selected_Items_Button_Text} name={'ios-attach'}/>
                        </TouchableOpacity>
                    </View>
    
    
                    <View style={{
                         //    ----__-_-whatever----__-_-
    
                    }}
                    >
                        <TouchableOpacity
                            onPress={()=>props.comment_post()}
                            style={TextInput_Write_A_Comment_In_Comment_Styles.rounded_back_groud}
                        >
                            <MTI
                                size={45}
                                style={{
                                    color: 'white',
                                    textAlign: 'left',
                                    alignSelf: 'stretch',
                                    fontSize: 40
                                }}
                                name={'send-circle'}
                            />
                        </TouchableOpacity>
                    </View>
    
                </View>
    
            </View>
    
        );
    };
    
    
    const TextInput_Write_A_Comment_In_Comment_Styles = StyleSheet.create({
    
        // ......
    
    });
    
    export default TextInput_Write_A_Comment_In_Comment;

Answer 4

• 您不必两次提供类型。当您已经为泛型（在 内<>）指定类型时，您不必显式键入 forwardRef 的参数
• 很可能您会将 ref 关联到 BaseModal 内的按钮，因此类型可以是HTMLButtonElement未知的。那让我们用打字稿推断类型

export default React.forwardRef<HTMLButtonElement, BaseModalProps & FeedbackDetailsContentProps>((props, ref) => {
  return (...);
});

或者

export default React.forwardRef< BaseModalProps & FeedbackDetailsContentProps>(
(
  props: BaseModalProps & FeedbackDetailsContentProps, 
  ref: ForwardedRef<HTMLButtonElement>
) => {
  return (...);
});