reactjs - 将属性附加到用 React.forwardRef 包装的功能组件

Question

我有一个用 React.forwardRef 包装的组件，碰巧它也是一个复合组件。

我不知道该如何保养

Form.Item  = FormItem;

同时 Form 组件函数被 forwardRef 包裹。

const Form = React.forwardRef((props, ref) => { return <form></form>});

typescript 给我一个错误(正确地)说

Property 'Item' does not exist on type 'ForwardRefExoticComponent>'.ts(2339)

Answer 1

只是为了更清楚地说明解决方案，因为它在外部站点上(致谢原作者 here，感谢@Antoan Elenkov)

export interface Props = {
   ...yourPropsHere;
};

export interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>> {
   yourStaticFunctionOrSomethingLikeThat: () => void;
}

const Component = React.forwardRef<HTMLInputElement, Props>((props, ref) => (
    <input ref={ref} {...props} />
)) as CompoundedComponent;

Component.yourStaticFunctionOrSomethingLikeThat = () => {};