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

Question

I have a function, selectMarket() , which I'm passing as a prop to a component, AssetSelectorRow . In the AssetSelectorRow , I'm assigning the function to be called during an onClick event.

If I use onClick={selectMarket(asset)} , I get the following error:

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

If I use onClick={() => selectMarket(asset)} , then everything works as intended, but I'd like to avoid this notation as it unnecessarily renders a new callback on each render. I'm also just curious as to why the former doesn't work.

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

The error is correct, because the expected signature of the click event handler does not match your actual handler.

You might adjust your function as follows:

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

but now the problem is:

how to pass the second argument (market) to the function?

the onClick event does not do that for you.

Thus, the only way to correctly handle your function is via indirect handler call, as you already figured it out:

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

it works because the signature simply drops the expected argument (event), but that's not in conflict to anything.