So exportieren Sie forwardRef mit ForwardRefRenderFunction

Question

Ich habe eine Komponente, die zu einer UI-Bibliothek gehört. Nennen wir sie Eingabekomponente. Wenn ich diese Bibliothek zum Aufrufen von Input verwende, kann ich viele Typen aufrufen. Zum Beispiel

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

Jetzt möchte ich einen Wrapper in diese Eingabekomponente schreiben, also schreibe ich so

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

Dann kann ich sie so verwenden:

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

Auf diese Weise kann ich jedoch keine ref- Methoden der ursprünglichen UI-Bibliothek verwenden (so etwas wie inputRef.current.focus()). Deshalb benutze ich ForwardRef und ForwardRefRenderFunction so

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

Wenn ich dies ändere, kann ich den Verweis an die ursprüngliche UI-Bibliothek übergeben und die ursprünglichen Methoden verwenden. Mein aktuelles Problem ist jedoch, dass ich beim Wechsel zu forwardRef und ForwardRefRenderFunction TextArea und Search nicht mehr aufrufen kann

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

Dies ist der Fehler:

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.

Kann mir jemand eine Anleitung dazu geben? Vielen Dank

Answer 1

Was Sie tun, ist:

1. Funktion InputWrapperals Typ definierenInputWrapperComponent
2. Definieren Searchund TextAreaals Mitglieder vonInputWrapper
3. Erstellen Sie eine Ref-Weiterleitungskomponente mit forwardRef

Das Problem ist, dass forwardRefeine völlig neue Komponente erstellt wird und es egal ist, ob zuvor einige Unterkomponenten definiert wurden. Sie werden einfach weggeworfen und Sie erhalten den Fehler, dass diese Mitglieder undefiniert sind.

Der Weg ist also tatsächlich:

1. Funktion InputWrapperals Typ definierenInputWrapperComponent
2. Erstellen Sie eine Ref-Weiterleitungskomponente mit forwardRef
3. Definieren Sie Searchund TextAreaals Mitglieder der neuen Ref-Weiterleitungskomponente

Answer 2

Am Ende verwende ich ForwardRefExoticComponent anstelle von ForwardRefRenderFunction

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

Aber ich bin mir wirklich nicht sicher, was der Unterschied zwischen ihnen ist

Update : Bitte überprüfen Sie Peters Antwort.

Was ist der Unterschied zwischen den beiden ? Bitte überprüfen Sie seine Antwort hier: Was ist der Unterschied zwischen ForwardRefExoticComponent und ForwardRefRenderFunction in Reaktion?