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

Question

我有一个 function, selectMarket() ，我将其作为道具传递给组件AssetSelectorRow 。 在AssetSelectorRow中，我指定 function 在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>
  );
});

Answer 1

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

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

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

但现在的问题是：

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

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

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

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

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