如何向React函数组件传递参数并解决TS2740类型错误

你遇到的TS报错是两个错误共同导致的：

1. React函数组件的第一个入参永远是props对象，你直接将SuccessCount的入参声明为AppResult[]数组类型，相当于期望整个props对象是数组，但实际React传入的是包含children等属性的普通对象，类型完全不匹配。
2. 你调用组件的写法错误：<SuccessCount>{appResults}={appResults}</SuccessCount> 是把appResults放到了组件的children属性位置，还多写了冗余的={appResults}，完全不符合props传参的规范。

步骤1：修正组件的参数定义 #

给SuccessCount显式声明Props类型，从props中解构拿到appResults参数：

// 先定义组件的Props类型
interface SuccessCountProps {
  appResults: AppResult[];
}

const SuccessCount = ({ appResults }: SuccessCountProps) => {
  const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
  // 这里返回你原来renderSuccessCount返回的内容即可
  return Something;
};

如果不想单独定义Props接口，也可以直接在行内声明参数类型，效果一致：

const SuccessCount = ({ appResults }: { appResults: AppResult[] }) => {
  // 组件逻辑不变
}

步骤2：修正组件调用的传参方式 #

把原来错误的组件调用行，改为通过props传入appResults：

const newRows = [];
searchResults.forEach((appResults, i) => {
  newRows.push({
    cells: [
      appResults[0].applicationId,
      // 修正后的调用写法
      <SuccessCount appResults={appResults} />,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });
});

改完之后类型报错就会消失，逻辑和你原来的renderSuccessCount调用完全一致。

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