我正在写一个React组件,它可以将ref转发给它的 child
我发现对于函数组件的返回类型,我可以使用 ForwardRefExoticComponent 和 ForwardRefRenderFunction 。但是我不确定它们之间有什么区别。
到目前为止,当使用 ForwardRefExoticComponent 时,我可以扩展它,而 ForwardRefRenderFunction 无法呢?我在这里发布了一个与我的案子有关的问题:How to export forwardRef with ForwardRefRenderFunction
如果有人知道他们之间的区别以及他们的所作所为,请帮助我。因为似乎React团队没有关于它们的文档(但是它们在react包中)
最佳答案
ForwardRefExoticComponent
here的定义是
interface ExoticComponent<P = {}> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
}
interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
displayName?: string;
}
interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
如果你写出来,你会得到interface ForwardRefExoticComponent<P> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
displayName?: string;
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
ForwardRefRenderFunctionhere的定义是
interface ForwardRefRenderFunction<T, P = {}> {
(props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
displayName?: string;
// explicit rejected with `never` required due to
// https://github.com/microsoft/TypeScript/issues/36826
/**
* defaultProps are not supported on render functions
*/
defaultProps?: never;
/**
* propTypes are not supported on render functions
*/
propTypes?: never;
}
差异性ForwardRefRenderFunction
不支持propTypes
和defaultProps
,而ForwardRefExoticComponent
支持。 ForwardRefExoticComponent
具有类型$$typeof
的附加成员symbol
ForwardRefRenderFunction
的调用签名使用props
对象,该对象必须包含成员children
和ref对象作为参数,而ForwardRefExoticComponent
的调用签名仅将任意形状的props对象作为参数。 一些更多的想法
这两个定义的相互影响最好在definition of the
forwardRef
function中看到:function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
同样,这两个定义之间的巨大差异似乎是,ForwardRefExoticComponent
(像所有外来组件一样)不是函数组件,而是实际上只是对象,在呈现它们时会对其进行特殊处理。因此评论并且由于某些原因,在某些地方这些奇特的组件是必需的。