Come esportare forwardRef con ForwardRefRenderFunction

Question

Sto avendo un componente che appartiene a una libreria dell'interfaccia utente, chiamiamolo componente di input. Quando si usa questa libreria per chiamare Input, ci sono molti tipi che posso chiamare. Per esempio

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

Ora voglio scrivere un wrapper per questo componente di input, quindi scrivo in questo modo

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;

in index.tsx

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

Quindi posso usarli in questo modo:

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

Ma in questo modo, non posso utilizzare i metodi ref della libreria UI originale (qualcosa di simile inputRef.current.focus()). ecco perché uso forwardRef e ForwardRefRenderFunction in questo modo

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);

Passando a questo, posso passare il riferimento alla libreria dell'interfaccia utente originale e posso utilizzare i suoi metodi originali. Tuttavia, il mio problema adesso è quando cambio a forwardRef e ForwardRefRenderFunction , non posso chiamare TextArea e più Ricerca più

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

Questo è l'errore:

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.

Qualcuno può darmi qualche guida su questo? Grazie

Answer 1

Quello che stai facendo è:

1. Definisci la funzione InputWrappercome tipoInputWrapperComponent
2. Definisci Searche TextAreacome membri diInputWrapper
3. Crea un componente di inoltro di riferimento con forwardRef

Il problema è che forwardRefcrea un componente completamente nuovo e non si preoccupa se ci sono stati alcuni sottocomponenti definiti in precedenza. Verranno semplicemente gettati via e otterrai l'errore che quei membri non siano definiti.

Quindi la strada da percorrere è in realtà:

1. Definisci la funzione InputWrappercome tipoInputWrapperComponent
2. Crea un componente di inoltro di riferimento con forwardRef
3. Definire Searche TextAreacome membri del nuovo componente di inoltro ref

Answer 2

Finisco per usare ForwardRefExoticComponent invece di ForwardRefRenderFunction

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

Ma non sono davvero sicuro di quale sia la differenza tra loro

Aggiornamento : controlla la risposta di Peter.

Per qual è la differenza tra i due, controlla la sua risposta qui: Qual è la differenza tra ForwardRefExoticComponent e ForwardRefRenderFunction in react?