javascript - 如何使用 ForwardRefRenderFunction 导出 forwardRef

Question

我有一个属于 UI 库的组件，我们称它为输入组件。使用这个库调用Input时，我可以调用的类型有很多。例如

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

现在我想给这个Input组件写一个wrapper，所以我这样写

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;

在 index.tsx

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

然后我可以像这样使用它们:

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

但是通过这样做，我不能使用原始 UI 库的 ref 方法(类似于 inputRef.current.focus() )。这就是为什么我像这样使用 forwardRef 和 ForwardRefRenderFunction

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

通过更改为这个，我可以将 ref 传递给原始 UI 库并可以使用其原始方法。但是，我现在的问题是，当我更改为 forwardRef 和 ForwardRefRenderFunction 时，我无法再调用 TextArea 和 Search

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

这是错误:

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.

任何人都可以给我一些指导吗？谢谢

Answer 1

我最终使用 ForwardRefExoticComponent 而不是 ForwardRefRenderFunction

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

但我真的不知道它们之间有什么区别

更新:请检查Peter的回答。

两者有什么区别，请看他的回答: Whats the difference between ForwardRefExoticComponent and ForwardRefRenderFunction in react?