类型 '(activeTabIndex: number) => void' 不可分配给类型 '() => number'.ts(2322)

Question

我试图将我的功能从主要父母传递给他的第二个孩子。 这 3 个组件是：Tabs、PageHero 和 BIM。 BIM 是主要的父级，然后是 PageHero，然后是 Tabs 组件。 我试图将一个变量和一个函数从 BIM 传递给两个。 当我尝试在 BIM 组件中创建我的函数时，我从标题中收到错误消息。 下面是组件代码：

标签：

 interface Props { firstTabContent?: React.ReactNode; secondTabContent?: React.ReactNode; onChange?: () => number; activeTabIndex?: number; } const Tabs = ({ firstTabContent, secondTabContent, onChange, activeTabIndex, }: Props) => { // const [activeTabIndex, setActiveTabIndex] = useState<number>(1); return ( <div className="c-tabs"> <ul className="c-tabs__list"> <li className="c-tabs__item"> <button onClick={onChange} className={ activeTabIndex === 1 ? "c-tabs__btn" : "c-tabs__btn--active" } > Tab 1 </button> </li>

这是PageHero：

 import Tabs from "./Tabs/Tabs"; export interface Props { title?: string; date?: string; description?: string; entries?: string; onChange?: () => number; activeTabIndex?: number; } const PageHero: React.FC<Props> = ({ title, date, entries, description, onChange, activeTabIndex, }) => { return ( <div> <div className="pagehero"> <div className="pagehero__container"> <div className="pagehero__text"> <h1 className="pagehero__title">{title}</h1> <div className="pagehero__container-date"> <p className="pagehero__date">{date}</p> </div> </div> <div className="pagehero__container-links"> <Tabs firstTabContent="ccc" secondTabContent="aaa" onChange={onChange} activeTabIndex={activeTabIndex} />

主要父母是：

 import "./Bim.css"; export interface Props {} const Bim: React.FC<Props> = () => { const [activeTabIndex, setActiveTabIndex] = useState<number>(1); function handleTabClick(activeTabIndex: number) { setActiveTabIndex(activeTabIndex); } return ( <div> <Navigation /> <PageHero title="BEST INNOVATIVE MINDS 2021" date="OPEN ● 24days, 12h, 41mins Remaining" description="Description" entries="Entries" onChange={handleTabClick} />

在 BIM 组件上，我收到此错误：

类型 '(activeTabIndex: number) => void' 不能分配给类型 '() => number'.ts(2322) PageHero.tsx(12, 3): 预期的类型来自这里声明的属性 'onChange' 'IntrinsicAttributes & Props 类型

来自我在 PageHero 组件中的 onChange={handleTabClick} 道具。 我对打字稿不太了解，我希望你能写一个明确的 answear 。

Answer 1

prop 签名应该是onChange?: (x:number) => void in Props ;

因为您的处理程序不返回任何内容，并且假设Tabs中的onChange签名相同，即采用number参数并返回void

另外你的标签组件需要修改onClick={onChange} prob 需要更像onClick={()=>onChange(activeTabIndex)}