Comment exporter forwardRef avec ForwardRefRenderFunction

Question

J'ai un composant qui appartient à une bibliothèque d'interface utilisateur, appelons-le composant d'entrée. Lorsque vous utilisez cette bibliothèque pour appeler Input, il existe de nombreux types que je peux appeler. Par exemple

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

Maintenant, je veux écrire un wrapper pour ce composant d'entrée, donc j'écris comme ça

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;

dans index.tsx

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

Ensuite, je peux les utiliser comme ceci:

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

Mais en faisant cela, je ne peux pas utiliser les méthodes ref de la bibliothèque d'interface utilisateur d'origine (quelque chose comme inputRef.current.focus()). c'est pourquoi j'utilise forwardRef et ForwardRefRenderFunction comme ceci

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

En modifiant cela, je peux transmettre la référence à la bibliothèque d'interface utilisateur d'origine et utiliser ses méthodes d'origine. Cependant, mon problème est maintenant droit quand je change de forwardRef et ForwardRefRenderFunction , je ne peux pas appeler TextArea et Rechercher plus

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

Voici l'erreur:

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.

Quelqu'un peut-il me donner des conseils à ce sujet? Merci

Answer 1

Ce que vous faites est:

1. Définir la fonction InputWrappercomme typeInputWrapperComponent
2. Définir Searchet en TextAreatant que membres deInputWrapper
3. Créer un composant de transfert de référence avec forwardRef

Le problème est que cela forwardRefcrée un composant complètement nouveau et ne se soucie pas de savoir si certains sous-composants ont été définis auparavant. Ils seront simplement jetés et vous obtenez l'erreur de ces membres étant indéfinis.

Donc, la voie à suivre est en fait:

1. Définir la fonction InputWrappercomme typeInputWrapperComponent
2. Créer un composant de transfert de référence avec forwardRef
3. Définir Searchet en TextAreatant que membres du nouveau composant de transfert de référence

Answer 2

Je finis par utiliser ForwardRefExoticComponent au lieu de ForwardRefRenderFunction

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

Mais je ne sais vraiment pas quelle est la différence entre eux

Mise à jour : Veuillez vérifier la réponse de Peter.

Pour quelle est la différence entre les deux, veuillez vérifier sa réponse ici: Quelle est la différence entre ForwardRefExoticComponent et ForwardRefRenderFunction dans react?