ForwardRefRenderFunction ile forwardRef nasıl dışa aktarılır

Question

Bir UI kitaplığına ait bir bileşene sahibim, ona Giriş bileşeni diyelim. Giriş'i çağırmak için bu kitaplığı kullanırken arayabileceğim birçok tür var. Örneğin

<Input />
<Input.TextArea />
<Input.Search />

Şimdi bu Giriş bileşenine bir sarmalayıcı yazmak istiyorum, bu yüzden şöyle yazıyorum

type InputWrapperComponent = FC<InputProps> & {
  Search: typeof Input.Search;
  TextArea: typeof Input.TextArea;
};

const InputWrapper: InputWrapperComponent = (props) => {
  // make some minor changes here
}

InputWrapper.Search = Input.Search;
InputWrapper.TextArea = Input.TextArea;
export default InputWrapper;

içinde index.tsx

export { default as InputWrapper } from './input';

O zaman onları şu şekilde kullanabilirim:

<InputWrapper />. --> Works
<InputWrapper.TextArea />. --> Works
<InputWrapper.Search />. --> Works

Ancak bunu yaparak , orijinal UI kitaplığının ref yöntemlerini kullanamıyorum (buna benzer bir şey inputRef.current.focus()). Kullandığım neden en o forwardRef ve ForwardRefRenderFunction böyle

type InputWrapperComponent = ForwardRefRenderFunction<HTMLInputElement, InputProps> & {
  Search: typeof Input.Search;
  TextArea: typeof Input.TextArea;
};

const InputWrapper: InputWrapperComponent = (props, ref) => {
  // make some minor changes here and add the ref to the input
}

InputWrapper.Search = Input.Search;
InputWrapper.TextArea = Input.TextArea;
export default forwardRef(InputWrapper);

Buna geçerek ref'i orijinal UI kitaplığına geçirebilir ve orijinal yöntemlerini kullanabilirim. Ben değiştirmek Ancak, şu anda benim sorundur forwardRef ve ForwardRefRenderFunction , ben arayamam TextArea ve ara artık

<InputWrapper />. --> Works
<InputWrapper.TextArea />. --> Error
<InputWrapper.Search />. --> Error

Bu hata:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Bu konuda bana rehberlik eden var mı? Teşekkürler

Answer 1

Yaptığın şey:

1. İşlevi InputWrappertür olarak tanımlayınInputWrapperComponent
2. Tanımla Searchve TextAreaüye olarakInputWrapper
3. Şununla bir ref yönlendirme bileşeni oluşturun: forwardRef

Sorun, forwardReftamamen yeni bir bileşen yaratması ve daha önce tanımlanmış bazı alt bileşenlerin olup olmadığı umurunda değil. Sadece atılacaklar ve bu üyelerin tanımsız olma hatasını alacaksınız.

Öyleyse gitmenin yolu aslında:

1. İşlevi InputWrappertür olarak tanımlayınInputWrapperComponent
2. Şununla bir ref yönlendirme bileşeni oluşturun: forwardRef
3. Define Searchve TextAreayeni ref yönlendirme bileşeni üyeleri olarak

Answer 2

ForwardRefRenderFunction yerine ForwardRefExoticComponent kullanıyorum

type InputWrapperComponent = React.ForwardRefExoticComponent<
  React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>
> & {
  Search: typeof Input.Search;
  TextArea: typeof Input.TextArea;
  Password: typeof Input.Password;
};

Ama aralarındaki farkın ne olduğundan gerçekten emin değilim

Güncelleme : Lütfen Peter'ın cevabını kontrol edin.

İkisi arasındaki fark nedir, lütfen buradan yanıtını kontrol edin: React'te ForwardRefExoticComponent ve ForwardRefRenderFunction arasındaki fark nedir?