如何使用 ForwardRefRenderFunction 导出forwardRef

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

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

现在我想给这个输入组件写一个包装器，所以我这样写

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 索引.tsx

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

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

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

但通过这样做，我不能使用ref原始 UI 库的方法（类似于inputRef.current.focus()）。这就是我使用的原因前向引用 and 前向参考渲染函数像这样

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

通过更改为这一点，我可以将引用传递给原始 UI 库并可以使用其原始方法。但是，我现在的问题是当我更改为前向引用 and 前向参考渲染函数， 我不能打电话TextArea and Search anymore

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

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

我最终使用 ForwardRefExoticComponent 而不是 ForwardRefRenderFunction

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

但我真的不确定它们之间有什么区别

Update：请检查彼得的回答。

两者有什么区别，请查看他的回答：React 中的 ForwardRefExoticComponent 和 ForwardRefRenderFunction 有什么区别？ https://stackoverflow.com/questions/64237804/whats-the-difference-between-forwardrefexoticcomponent-and-forwardrefrenderfunct