Usando @types/react 16.8.2 y TypeScript 3.3.1.
Tomé este ejemplo de referencias directas directamente de la documentación de React y agregué un par de parámetros de tipo:
const FancyButton = React.forwardRef<HTMLButtonElement>((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef<HTMLButtonElement>(); <FancyButton ref={ref}>Click me!</FancyButton>; Recibo el siguiente error en la última línea debajo de FancyButton :
Escriba '
{ children: string; ref: RefObject<HTMLButtonElement>; }' no se puede asignar al tipo 'IntrinsicAttributes & RefAttributes<HTMLButtonElement>'. La propiedad 'children' no existe en el tipo 'IntrinsicAttributes & RefAttributes<HTMLButtonElement>'.ts(2322)
Parecería que la definición de tipo para el valor de retorno de React.forwardRef es incorrecta, no se fusiona correctamente en el elemento secundario. Si hago que <FancyButton> se cierre automáticamente, el error desaparece. La falta de resultados de búsqueda para este error me lleva a creer que me estoy perdiendo algo obvio.
trevorsg, debe pasar las propiedades del botón:
import * as React from 'react' type ButtonProps = React.HTMLProps<HTMLButtonElement> const FancyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => ( <button type="button" ref={ref} className="FancyButton"> {props.children} </button> )) // You can now get a ref directly to the DOM button: const ref = React.createRef<HTMLButtonElement>() <FancyButton ref={ref}>Click me!</FancyButton>AGREGADO:
En versiones recientes de TS y @types/react, también puede usar React.ComponentPropsWithoutRef<'button'> en lugar de React.HTMLProps<HTMLButtonElement>
Las respuestas de aMarCruz y euvs funcionan, pero mienten un poco a los consumidores. Dicen que aceptan todas las propiedades HTMLButtonElement, pero las ignoran en lugar de reenviarlas al botón. Si solo está tratando de fusionar correctamente el apoyo de los niños, es posible que desee usar React. PropsWithChildren en su lugar:
import React from 'react'; interface FancyButtonProps { fooBar?: string; // my custom prop } const FancyButton = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<FancyButtonProps>>((props, ref) => ( <button type="button" ref={ref} className="fancy-button"> {props.children} {props.fooBar} </button> )); FancyButton.displayName = 'FancyButton';O agrega explícitamente un accesorio para niños:
interface FancyButtonProps { children?: React.ReactNode; fooBar?: string; // my custom prop } const FancyButton = React.forwardRef<HTMLButtonElement, FancyButtonProps>((props, ref) => ( <button type="button" ref={ref} className="fancy-button"> {props.children} {props.fooBar} </button> )); FancyButton.displayName = 'FancyButton';O si realmente desea aceptar todos los accesorios del botón y reenviarlos (por ejemplo, permitir que los consumidores elijan tipo de botón = "enviar"), entonces es posible que desee usar rest/spread:
import React from 'react'; interface FancyButtonProps extends React.ComponentPropsWithoutRef<'button'> { fooBar?: string; // my custom prop } const FancyButton = React.forwardRef<HTMLButtonElement, FancyButtonProps>( ({ children, className = '', fooBar, ...buttonProps }, ref) => ( <button {...buttonProps} className={`fancy-button ${className}`} ref={ref}> {children} {fooBar} </button> ), ); FancyButton.displayName = 'FancyButton';La respuesta dada por aMarCruz funciona bien. Sin embargo, si también necesita pasar accesorios personalizados al FancyButton , así es como se puede hacer.
interface FancyButtonProps extends React.ComponentPropsWithoutRef<'button'> { fooBar?: string; // my custom prop } const FancyButton = React.forwardRef<HTMLButtonElement, FancyButtonProps>((props, ref) => ( <button type="button" ref={ref} className="FancyButton"> {props.children} {props.fooBar} </button> )); /// Use later // You can now get a ref directly to the DOM button: const ref = React.createRef<HTMLButtonElement>() <FancyButton ref={ref} fooBar="someValue">Click me!</FancyButton>Solo agregando aquí para completar.