React组件传props报错：Binding element 'count'隐式'any'类型如何解决？

这个错误是TypeScript严格类型检查的产物——你没给MyButton组件的props声明明确类型，TypeScript默认把未定义类型的props推断为any，严格模式下这种隐式any会触发报错。下面是几种靠谱的解决方式：

方式一：用interface定义props类型 #

这是最常用的方案，明确声明每个props的类型：

'use client';

import { useState } from "react";

// 定义组件props的类型接口
interface MyButtonProps {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

function MyButton({ count, setCount }: MyButtonProps) {
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <button className="bg-sky-500 mt-2 rounded-md p-2" onClick={handleClick}>Click Me!</button>
  );
}

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-cyan-300">
      <div className="flex flex-col items-center">
        <h1>This is a React Demo. Button is clicked {count} times.</h1>
        <MyButton count={count} setCount={setCount} />
      </div>
    </div>
  );
}

注意：删掉了代码里多余的import { count } from "console"，这个导入完全没用。setCount的类型用React内置的React.Dispatch<React.SetStateAction<number>>，完美匹配useState返回的更新函数类型。

方式二：用type定义props类型 #

和interface效果一致，语法略有不同：

'use client';

import { useState } from "react";

type MyButtonProps = {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
};

function MyButton({ count, setCount }: MyButtonProps) {
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <button className="bg-sky-500 mt-2 rounded-md p-2" onClick={handleClick}>Click Me!</button>
  );
}

// Home组件代码不变...

方式三：用React.FC包裹组件 #

如果习惯用箭头函数写组件，可以用React.FC（FunctionComponent）来指定props类型：

'use client';

import { useState, FC } from "react";

interface MyButtonProps {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

const MyButton: FC<MyButtonProps> = ({ count, setCount }) => {
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <button className="bg-sky-500 mt-2 rounded-md p-2" onClick={handleClick}>Click Me!</button>
  );
}

// Home组件代码不变...

不推荐的临时方案 #

如果只是想快速绕过错误（不建议，会丢失TypeScript类型检查的优势），可以直接给props指定any类型：

function MyButton({ count, setCount }: any) {
  // 组件逻辑不变
}

内容的提问来源于stack exchange，提问作者Anurag Hale