Question

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

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

现在我想为该Input组件编写一个包装器，所以我这样写

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库的{strong> 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;
};

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

更新：请检查彼得的回答。

关于两者之间的区别是什么，请在这里检查他的答案： Whats the difference between ForwardRefExoticComponent and ForwardRefRenderFunction in react?

Answer 2

您正在做的是：

将函数InputWrapper定义为类型InputWrapperComponent
将Search和TextArea定义为InputWrapper的成员
使用forwardRef创建参考转发组件

问题是forwardRef创建了一个全新的组件，并且不在乎之前是否定义了某些子组件。他们将被扔掉，您会得到那些成员未定义的错误。

所以实际的方法是：

将函数InputWrapper定义为类型InputWrapperComponent
使用forwardRef创建参考转发组件
将Search和TextArea定义为新的引用转发组件的成员

如何使用ForwardRefRenderFunction导出forwardRef

2 个答案: