React Onclick - нет перегрузки соответствует этому вызову

Question

Новый для TS и должен сказать, что ошибки не очень дружелюбны.

Я пытаюсь передать функцию ловушки компоненту в качестве опоры, которую я добавил в свой интерфейс, и я получаю эту ошибку, которую не могу понять.

Никакая перегрузка не соответствует этому вызову. Перегрузка 1 из 2, '(реквизиты: Pick, HTMLButtonElement>, "form" | ... еще 264 ... | "onTransitionEndCapture"> & {...;} & IButtonProps, "form" | ... еще 267 ... | "setActivity"> & Partial <...>, "form" | ... 267 еще ... | "setActivity"> & {...;} & {...;}): ReactElement <...> ', выдал следующую ошибку. Свойство 'setActivity' отсутствует в типе '{children: string | (строка & {}) | (строка и ReactElement ReactElement Component)>) | (new (props: any) => Компонент <...>)>) | (строка & ReactNodeArray) | (строка & ReactPortal); активный: логический; onClick: () => Функция; } 'но требуется в типе' Pick, HTMLButtonElement>, "form" | ... еще 264 ... | "onTransitionEndCapture"> & {...; } & IButtonProps, "форма" | ... еще 267 ... | "setActivity"> & Partial <...>, "form" | ... 26

Я пробовал несколько вещей, которые я прочитал, например, поместив метод в анонимную функцию и установив мой контекстный клик равным (e: React.MouseEvent) => void, но ни одна из них не работает , Из своего кода я чувствую, что делаю все правильно, но, очевидно, нет.

Вот мой компонент:

interface IButtonProps {
  children: string,
  active: Boolean,
  setActivity: Function,
  onClick: (e: React.MouseEvent) => void,
}


// Styling
const Button = styled.button<IButtonProps>`
  ${({ theme }) => `
    border: ${theme.TabsBorder};
    font-size: ${theme.TabsFontsize};
    background-color: transparent;
    flex: 1;
    padding: 1rem;
    outline: 0;

    &:hover {
      background-color: ${theme.TabActiveBackground};
      color: ${theme.TabActiveColour};
    }

    ${({ active }) => active && `
      background-color: ${theme.TabActiveBackground}
      color: ${theme.TabActiveColour};
    `}
  `}
`;

const Item: FC<IButtonProps> = ({
  children,
  active,
  setActivity,
}) => (
  <Button
    active={active}
    onClick={() => setActivity}
  >
    {children}
  </Button>
);

SetActivity - это ловушка, которую я передаю в компонент для ссылки.

Answer 1

метод onClick возвращает функцию setActivity: Function, которой быть не должно. это должно быть исполнение

onClick={() => setActivity()}

или, если функция setActivity уже является самосвязанной, вы можете сразу же передать ее в onClick реквизит

onClick={setActivity}

IButtonProps имеет setActivity в качестве свойства. это означает, что вы должны передать его компоненту Button

const Item = (props: any) => {
    const { children, active, setActivity, } = props;
    return (
        <Button
             active={active}
             setActivity={() => {}}
             onClick={() => setActivity()}
        >
             {children}
        </Button>
     );
};