如何将自己定制的inputComponent JSX <input />添加到react-phone-number-input PhoneInput？

Question

代码遵循此描述。

react-phone-number-input允许用户将其默认的<input /> JSX标记替换为自己的标记，这特别需要类型React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>>和forwardRef (以允许访问<input />)。

虽然我相信我已经在myTextInput中提供了这一点，但编译器抱怨说：

Property '$$typeof' is missing in type 'Element' but required in type 'ForwardRefExoticComponent<...和Type 'Element' is not assignable to type 'ForwardRefExoticComponent<...

好的，myTextInput = <ForwardedInput确实返回了一个<input /> JSX，所以是的，它是一个React Element，因此错误消息是有意义的。但是上述标记将解析为React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>>，那么我如何让编译器识别它呢？

感谢您的阅读。

import React, { forwardRef, InputHTMLAttributes } from 'react';
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'

const ForwardedInput = forwardRef<any, InputHTMLAttributes<HTMLInputElement>>(
    (props, ref) => {
        const { onChange, value } = props;
        return (
            <input
                type="text"
                ref={ref}
                onChange={onChange}
                value={value}
            />
        );
    }
);

const MyPhoneInput = () => {

    const ref = React.createRef();
    const myTextInput = <ForwardedInput 
        onChange={() => {}}
        value="string"
        ref={ref}
    />;

    return (
        <div>
            <PhoneInput
                    placeholder="Enter phone number"
                    value={"value"}
                    inputComponent={myTextInput}
                    onChange={() => {
                        return;
                    }}
                />
        </div>
    );
};

export default MyPhoneInput;

Answer 1

inputComponent={ForwardedInput}

这是可行的。现在我的生活非常忙碌，我没有时间详细解释，但我会尽快回到这个问题上来。