TypeError: Component is not a function on adding forwardRef

Question

您好，我试图将 forwardRef 添加到子组件，但在添加 forwardRef 时得到以下信息： TypeError: Component is not a function

组件定义如下：

import React from 'react';
import { forwardRef } from 'react';
import { TextInputFocusEventData } from 'react-native';
import { NativeSyntheticEvent, StyleSheet } from 'react-native';
import { Input, InputProps } from 'react-native-elements';
import { Metrics, Colors } from '../../theme';
import Icons from '../Icons';


const CustomTextInput2 = forwardRef<TextInput, ICustomtextnputProps>((props, ref) => {
    const { name, required } = props;

    return (
        <Input
            rightIcon={<Icons name="right" />}
            placeholder={name?.concat(required ? '*' : '')}
            inputContainerStyle={styles.inputContainer}
            inputStyle={styles.inputText}
            {...props}
        />
    )
});
....

这是 StackTrace：

ExceptionsManager.js:180 TypeError: Component is not a function

This error is located at:
    in Unknown (at AddDetailsModal/index.tsx:67)
    in RCTView (at View.js:34)
    in View (at AddDetailsModal/index.tsx:66)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at CustomModal/index.tsx:71)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at TouchableOpacity.js:221)
    in TouchableOpacity (at TouchableOpacity.js:271)
    in Unknown (at CustomModal/index.tsx:70)
    in RCTView (at View.js:34)
    in View (at KeyboardAvoidingView.js:220)
    in KeyboardAvoidingView (at CustomModal/index.tsx:69)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at Modal.js:228)
    in RCTView (at View.js:34)
    in View (at Modal.js:249)
    in VirtualizedListContextResetter (at Modal.js:247)
    in RCTModalHostView (at Modal.js:234)
    in Modal (at CustomModal/index.tsx:63)

我需要更改什么才能向该组件添加 forwardRef 吗？

Answer 1

通过 React.forwardRef 包装组件并从父组件传递 ref 后，您需要重新加载应用程序！我现在面对这个问题并看到了相同的错误消息，并通过重新加载应用程序简单地解决了

TypeError: Component is not a function on adding forwardRef

TypeError: Component is not a function on adding forwardRef

javascript

reactjs

react-native

react-hooks

react-forwardref