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

【问题标题】：Type '(activeTabIndex: number) => void' is not assignable to type '() => number'.ts(2322)类型 '(activeTabIndex: number) => void' 不可分配给类型 '() => number'.ts(2322)
【发布时间】：2021-12-05 12:37:39
【问题描述】：

我正在尝试将我的功能从主要父母传递给他的第二个孩子。这 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} 属性。我对打字稿不太了解，希望你能写一个明确的答案。

【问题讨论】：

onChange 期望调用一个返回数字的不带参数的函数。你给它一个带有数字作为参数的函数，它什么都不返回。

标签： javascript jquery reactjs typescript

【解决方案1】：

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

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

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

【讨论】：

这对您有帮助还是您想进一步澄清？