时间戳

首页 > 解决方案 > 如何将函数作为道具传递给组件并在不使用 React+Typescript 中的箭头符号的情况下调用它们？

reactjs - 如何将函数作为道具传递给组件并在不使用 React+Typescript 中的箭头符号的情况下调用它们？

问题描述

我有一个函数 ，selectMarket()我将其作为道具传递给组件 ，AssetSelectorRow。在 中，我正在分配要在事件AssetSelectorRow期间调用的函数。onClick

如果我使用onClick={selectMarket(asset)}，我会收到以下错误：

Type 'void' is not assignable to type '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined'.  TS2322

如果我使用onClick={() => selectMarket(asset)}，那么一切都按预期工作，但我想避免这种表示法，因为它不必要地在每次渲染时渲染一个新的回调。我也很好奇为什么前者不起作用。

const selectMarket = (market: IPositionListItem) => {
  if (
    currentSymbol.base.id !== market.base ||
    currentSymbol.quote.id !== market.counter
  ) {
    setSelectedMarket(market);
  }
};

<AssetSelectorRow
  key={asset.name}
  asset={asset}
  selectMarket={selectMarket}
/>

AssetSelectorRow.js：

interface IOwnProps {
  asset: IPositionListItem;
  selectMarket: (asset: IPositionListItem) => void;

export const AssetSelectorRow = memo(({ asset, selectMarket }: IOwnProps) => {
  return (
    <div
      className="bp3-button-group bp3-fill bp3-minimal menu-item-group"
      key={asset.name}
      onClick={selectMarket(asset)}
    >
      Asset
    </div>
  );
});

标签： reactjstypescript

解决方案

错误是正确的，因为单击事件处理程序的预期签名与您的实际处理程序不匹配。

您可以按如下方式调整您的功能：

const selectMarket = (event: MouseEvent<HTMLDivElement, MouseEvent>, market: IPositionListItem) => {
  if (
    currentSymbol.base.id !== market.base ||
    currentSymbol.quote.id !== market.counter
  ) {
    setSelectedMarket(market);
  }
};

但现在的问题是：

如何将第二个参数（市场）传递给函数？

该onClick事件不会为您做到这一点。

因此，正确处理函数的唯一方法是通过间接处理程序调用，正如您已经弄清楚的那样：

onClick={() => selectMarket(asset)}

它之所以有效，是因为签名只是删除了预期的参数（事件），但这与任何事情都不冲突。

推荐阅读