Блог

Я новичок в машинописи, и мне нужно написать родительский компонент, который отправляет в качестве реквизита onClick дочернему компоненту, где находится кнопка, которая запускает функциональность onClick при нажатии.

Вот код:

 export function ParentComponent(props: ParentComponentProps) {   const [isOpened, toggleModal] = useToggle(false);  // useToggle is a custom hook that toggles a boolean  ...  const onClick = () =gt; {  toggleModal();  }   return (  lt;ChildComponent onClick={onClick} /gt;  ); }  

Для дочернего компонента я не знаю, как определить интерфейс, что здесь должно быть помещено?

 export interface ChildComponentProps {  onClick: lt;unknowngt;(); // what to add here? }  

А вот и дочерний компонент:

 export function ChildComponent({onClick}: ChildComponentProps) {  ...  return (   lt;divgt;  ...  lt;ButtonComponent   onClick={() =gt; onClick()}  ...  /gt;  ...  ); }  

Есть идеи, что добавить в интерфейс или должны ли быть какие-либо другие изменения, чтобы текст был правильным?

Для таких функций, как onClick, вы должны описать параметры ввода и вывода или просто написать функцию (хотя для лучшей проверки типа вам не следует просто писать функцию).

Так что что-то вроде этого:

 onClick: () =gt; void  

Если, например, ваша функция получает число и возвращает строку, вы должны написать ее так:

 onClick: (n: number) =gt; string  

Родительский компонент:

 interface OnClickIdInterface {  (): void, }  export interface parentPropsInterface {  onClick?: OnGetIdInterface; }   render() {  return lt;ChildComponent onClick={(id) =gt; this.onClick(id)}/gt;  }  

Дочерний компонент:

 const HomePresentation: React.FunctionComponentlt;parentPropsInterfacegt; = ({onClick}) =gt; {  return (  lt;div onClick={()=gt;onClick()}gt;  some content  lt;/divgt;  ) }  

Следующий код должен работать. Но это зависит от ButtonComponent . Используется React.MouseEventHandlerlt;T = Elementgt; как тип.

 export interface ChildComponentProps {  onClick: React.MouseEventHandlerlt;ButtonComponentgt; }  export function ChildComponent({onClick}: ChildComponentProps) {  ...  return (   lt;divgt;  ...  lt;ButtonComponent   onClick={() =gt; onClick()}  ...  /gt;  ...  ); }  

Пожалуйста, сообщите мне, если это неверно.