Soy nuevo en TypeScript y tengo que escribir un componente principal que envíe como apoyos onClick al componente secundario donde hay un botón que activa la funcionalidad de onClick cuando se hace clic.
Aquí está el código:
export function ParentComponent(props: ParentComponentProps) { const [isOpened, toggleModal] = useToggle(false); // useToggle is a custom hook that toggles a boolean ... const onClick = () => { toggleModal(); } return ( <ChildComponent onClick={onClick} /> ); }Para el componente secundario no sé cómo definir la interfaz, ¿qué se debe poner aquí?
export interface ChildComponentProps { onClick: <unknown>(); // what to add here? }Y aquí está el componente hijo:
export function ChildComponent({onClick}: ChildComponentProps) { ... return ( <div> ... <ButtonComponent onClick={() => onClick()} ... /> ... ); }¿Alguna idea de qué agregar a la interfaz o si debería haber otros cambios para que Typescript sea correcto?
Para funciones como onClick, debe describir los argumentos de entrada y salida o simplemente escribir Función (aunque para una mejor verificación de tipo no debe escribir simplemente Función).
Así que algo como esto:
onClick: () => voidSi, por ejemplo, su función obtiene un número y devuelve una cadena, debe escribirla así:
onClick: (n: number) => stringComponente principal:
interface OnClickIdInterface { (): void, } export interface parentPropsInterface { onClick?: OnGetIdInterface; } render() { return <ChildComponent onClick={(id) => this.onClick(id)}/> }Componente hijo:
const HomePresentation: React.FunctionComponent<parentPropsInterface> = ({onClick}) => { return ( <div onClick={()=>onClick()}> some content </div> ) }El siguiente código debería funcionar. Pero depende de ButtonComponent . Usó React.MouseEventHandler<T = Element> como tipo.
export interface ChildComponentProps { onClick: React.MouseEventHandler<ButtonComponent> } export function ChildComponent({onClick}: ChildComponentProps) { ... return ( <div> ... <ButtonComponent onClick={() => onClick()} ... /> ... ); }Por favor notifíqueme si esto es incorrecto.