javascript - Hur man exporterar forwardRef med ForwardRefRenderFunction

Jag har en komponent som tillhör ett UI-bibliotek, låt oss kalla det Input-komponenten. När jag använder detta bibliotek för att anropa Input finns det många typer jag kan anropa. Till exempel

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

Nu vill jag skriva en wrapper till denna Input-komponent, så jag skriver så här

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 index.tsx

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

Då kan jag använda dem så här:

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

Men genom att göra detta kan jag inte använda ref-metoder från det ursprungliga UI-biblioteket (något som inputRef.current.focus()). Det är därför jag använder forwardRef och ForwardRefRenderFunction på detta sätt

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

Genom att byta till detta kan jag skicka ref till det ursprungliga UI-biblioteket och kan använda dess ursprungliga metoder. Men mitt problem just nu är att när jag byter till forwardRef och ForwardRefRenderFunction kan jag inte längre anropa TextArea och Search

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

Det här är felet:

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.

Kan någon ge mig lite vägledning om detta? Tack

Svar #1

Jag slutar med att använda ForwardRefExoticComponent istället för ForwardRefRenderFunction

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

Men jag är verkligen inte säker på vad skillnaden mellan dem är

Uppdatering: Vänligen kontrollera Peters svar.

För vad är skillnaden mellan de två, vänligen kolla hans svar här: Vad är skillnaden mellan ForwardRefExoticComponent och ForwardRefRenderFunction i React?

Svar #2

Det du gör är:

  1. Definiera funktionen InputWrapper som typ InputWrapperComponent
  2. Definiera Search och TextArea som medlemmar av InputWrapper
  3. Skapa en ref-viderbefordrande komponent med forwardRef

Problemet är att forwardRef skapar en helt ny komponent och bryr sig inte om det har funnits några underkomponenter definierade tidigare. De kommer helt enkelt att kastas bort och du får felet att dessa medlemmar är odefinierade.

Så det sättet att gå är faktiskt:

  1. Definiera funktionen InputWrapper som typ InputWrapperComponent
  2. Skapa en ref-viderbefordrande komponent med forwardRef
  3. Definiera Search och TextArea som medlemmar av den nya komponenten med vidarebefordran av ref

Relaterade artiklar