JS转TSX后组件传参报错：Property 'param1'不存在于指定类型

这个问题我太熟了——本质是你在TypeScript里定义React函数组件的方式不对，和JS里的写法逻辑不一样！

错误原因分析 #

你现在把MyCard定义成了接受两个独立参数的普通函数：

function MyCard(param1: ObjectDto, toggleFunction: any) {}

但React的函数组件必须接受一个单一的props对象作为参数。TypeScript之所以报错，是因为它把第一个参数param1当成了整个props对象，而你在使用组件时传入了param1和toggleFunction两个属性，这自然和ObjectDto的类型不匹配，就出现了Property 'param1' does not exist的错误。

至于原来的JS能正常运行，是因为JS是弱类型语言，不会严格检查参数结构，React在JS环境下会默认把第一个参数当成props，第二个参数作为可选的上下文参数，但这其实是不符合React组件规范的写法，到TS里就会触发类型检查报错。

解决方案 #

我们需要严格按照React组件的规范，定义一个包含所有需要参数的Props类型，再让组件接受这个类型的对象作为参数：

1. 定义组件的Props类型
   首先先确保你已经有ObjectDto的定义（如果没有，先补上），然后定义MyCard的Props接口：

// 假设你的ObjectDto是这样的（根据实际情况调整）
interface ObjectDto {
  id: number;
  name: string;
  // 其他属性...
}

// 定义MyCard组件的Props类型
interface MyCardProps {
  param1: ObjectDto;
  toggleFunction: (index: any) => void;
}

2. 修改组件的定义
   把MyCard改成接受单一Props对象的形式，你可以选择直接使用props对象，或者解构参数：

// 方式一：直接使用props对象
function MyCard(props: MyCardProps) {
  // 使用时通过props.param1、props.toggleFunction访问
  return (
    <div className="card">
      {/* 你的卡片内容 */}
      <button onClick={() => props.toggleFunction(/* 传入index */)}>切换</button>
    </div>
  );
}

// 方式二：解构参数（更简洁）
function MyCard({ param1, toggleFunction }: MyCardProps) {
  // 直接使用param1和toggleFunction
  return (
    <div className="card">
      <h3>{param1.name}</h3>
      <button onClick={() => toggleFunction(/* 传入index */)}>切换</button>
    </div>
  );
}

3. 正常使用组件
   现在你在另一个.tsx文件里的使用方式<MyCard param1={param1Value} toggleFunction={myToggleFunction} />就完全符合TypeScript的类型检查要求了，不会再报错。

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