如何传递“参数”来反应组件

Posted 2023-02-22

【中文标题】如何传递“参数”来反应组件

【英文标题】：How to pass "parameter" to react component

【发布时间】：2022-01-12 06:55:18

【问题描述】：

我有一个简单的问题，我正在尝试在现有代码库中重构我的代码，此代码库使用渲染函数，但是我想用反应功能组件替换它。

但是，当我传入一个名为“searchResults”的参数时出现错误，该参数是一个列表。

这是之前的未重构代码

 searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created));

const Rows = [];

searchResults.forEach((appResults, i) => 
  Rows.push(
    cells: [
      appResults[0].applicationId,
      <>renderSuccessCount(appResults)</>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  );

这是我重构的代码

 const newRows = [];

searchResults.forEach((appResults, i) => 
  newRows.push(
    cells: [
      appResults[0].applicationId,
     <SuccessCount>appResults=appResults</SuccessCount>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  );

这是函数 SuccessCount（在未重构的代码中，renderSuccessCount 只是在重构版本中重命名为 SuccessCount

    const SuccessCount = (appResults: AppResult[]) => 
    const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
    return Something;
  ;

我的问题比较简单，如何将 appResults 传递到我的功能组件中，我当前的重构代码给了我这个错误

TS2740: Type ' children: any[]; ' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.

这是在 linter 中，我该如何摆脱它？

【问题讨论】：

我认为你唯一的问题是你应该去掉第一个括号。它应该像 appResults=appResults

你不应该把它作为一个属性而不是一个孩子来传递吗？ <SuccessCount appResults=appResults></SuccessCount>

你的 SuccessCount 是否返回 React 组件/JSX？

【参考方案1】：

现在SuccessCount 不是常规函数而是反应函数组件，它不会接收常规参数。您必须通过道具访问它们

const SuccessCount = (appResults: appResults: AppResult[]) => 

同

const SuccessCount = (props) => 
const appResults = props; // or const appResults = props.appResults;

用作功能组件

<SuccessCount appResults=appResults />