Typescript RefForwardingComponentが機能しない

Question

コンポーネントに参照を受け入れさせようとしています。

私はそのようなコンポーネントを持っています：

const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = (props, ref) => {
    return <div ref={ref}>Hoopla</div>
}

しかし、refを渡そうとすると、次のようになります。

<MyComponent ref={myRef}></MyComponent>

...私はこのエラーを受け取ります：

Property 'ref' does not exist on type 'IntrinsicAttributes & IMyComponentProps & { children?: ReactNode; }'.ts(2322)

何が悪いのですか？

Answer 1

カスタム関数コンポーネントは、小道具として「ref」を持つことができません。別の名前を付ける必要があります。たとえば、「yourRef」は、propsオブジェクト内にあります。

<MyComponent yourRef={myRef}></MyComponent>

したがって、refプロップを使用するには：

const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = (props) => {
return <div ref={props.yourRef}>Hoopla</div>}

または小道具を分解することができます：

const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = ({yourRef}) => {
return <div ref={yourRef}>Hoopla</div>}