reactjs - Cum pot face să funcționeze verificarea tipurilor cu React forwardRef

Am probleme să fac funcționarea verificării tipurilor în timp ce folosesc forwardRef. Codul meu este următorul:

Component: :

export interface Props {
  label?: string;
  callback: () => void;
}

export const _Button = (props: Props) => {

  return (
    <div>
      <p>test</p>
    </div>
  );
};

export const Button = React.forwardRef((props, ref) => {
  return <_Button { ...props } forwarded={ref} />
});

Utilizarea componentei: :

export const App = () => {

  return (
    <div>
      <h1>Application</h1>
      <Button label="foo" />
    </div>
  );
};

Poți vedea că nu transmit proprietatea callback necesară, dar TypeScript nu vede nicio problemă. Mai jos este ceea ce am încercat și tot nu reușesc să fac verificarea tipurilor să funcționeze.

export interface Props {
  label?: string;
  callback: () => void;
}

export const _Button = (props: Props) => {

  return (
    <div>
      <p>test</p>
    </div>
  );
};

export const Button = React.forwardRef<HTMLButtonElement, Props>((props: Props, ref) => {
  return <_Button { ...props } forwarded={ref} />
});

Orice ajutor ar fi apreciat. Mulțumesc.

Imagine adăugată ca răspuns la întrebările 1 și 2. Acesta este eroarea TypeScript la care mă aștept să apară.

Răspuns #1

Presupun că vrei să faci ceva de genul acesta:

import React, { FC, forwardRef, ForwardedRef, createRef } from 'react'

export interface Props {
    label?: string;
    callback: () => void;
    forwardedRef: ForwardedRef<HTMLDivElement>
}

export const _Button: FC<Props> = (props: Props) => {


    return (
        <div ref={props.forwardedRef}>
            <p>test</p>
        </div>
    );
};

export const Button = forwardRef<
    HTMLDivElement,
    Omit<Props, 'forwardedRef'>
>((props, ref) => <_Button {...props} forwardedRef={ref} />);


export const App = () => {
    const ref = createRef<HTMLDivElement>();

    return (
        <div>
            <h1>Application</h1>
            <Button ref={ref} label="foo" callback={() => null} />
        </div>
    );
};

Aici poți găsi documentație referitoare la refs.

Răspunsul #2

Tu transmiți ref prin props al _Button. Ar trebui să declari prop-ul forwarded pentru componenta _Button cu tipul: React.Ref<HTMLDivElement>.

type Ref<T> = RefCallback<T> | RefObject<T> | null;

import React from 'react';

export interface Props {
  label?: string;
  callback: () => void;
  forwarded: React.Ref<HTMLDivElement>;
}

export const _Button = (props: Props) => {
  return (
    <div>
      <p>test</p>
    </div>
  );
};

export const Button = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
  return <_Button {...props} forwarded={ref} />;
});

versiuni pachet:

"typescript": "^4.0.3",
"react": "^17.0.1",