類型 '(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)}