reactjs - typescript react : generic-based callback event handler function as prop to component

Question

我在创建一个基于通用的回调事件处理函数时遇到了问题，我想将它作为 prop 传递给我的组件。

我的目标:允许用户传递自定义回调函数:

1. 总是接受相同的论点
   • 一个事件(不是 react/dom 事件处理程序事件，它来自一个库)
2. 可以返回不同的返回类型
   • 对于我的用例，此组件用于不同的上下文，因此在一个地方用户将返回某个值而不是另一个地方

我尝试过的

1. 我使用泛型定义了我的 onNodeClick 函数，当我单独使用它时，它可以正常工作。

// ✅ Simple example of calling a generic function
const onNodeClick = <T,> (event:any) => {
  return null as unknown as T;
} 
const string_result = onNodeClick<string>(event_from_somewhere)

但是，当我尝试将此方法作为 prop 传递给我的组件时，出现了错误。我不确定如何解决它

Live Typescript Code Playground

import React from 'react';

type NodeComponentProps = {
  onNodeClick: <T>(event: any) => T;
};

export const NodeComponent = ({onNodeClick}: NodeComponentProps) => {
    return null;
}
  
const Homepage = () => {
  const handleNodeClick = <T,>(event: any): T => {
    return null as unknown as T;
  };

  return (
    <NodeComponent 
      onNodeClick={(event): string => {
         const string_result = handleNodeClick<string>(event); // ✅ correct type
         return string_result; // ❌ onNodeClick is throwing type error; see error message a few lines below
      }} 
    />
  )
}

/*
Type '<T>(event: any) => string' is not assignable to type '<T>(event: any) => T'.

Type 'string' is not assignable to type 'T'.

'T' could be instantiated with an arbitrary type which could be unrelated to 'string
*/

Answer 1

我认为您希望类型是通用的，而不是函数。如果该函数是通用的，那么它应该可以用尖括号调用并且可以正常工作。例如，身份函数适用于任何类型，因此它应该传递您的通用函数定义:

const Homepage = () => {
  const onNodeClick = <T>(x: T): T => {
    return x;
  };

  return (
    <NodeComponent 
      onNodeClick={onNodeClick} 
    />
  )
}

但是，您使用的函数将始终 返回一个字符串。如果您尝试使用 <number> 调用它，它会失败。因此，不是通用函数。

相比之下，如果您将 type 设为泛型，则您应该能够指定您将它与字符串一起使用:

这是一个Playground link

type NodeComponentProps<T> = {
  onNodeClick: (event: any) => T;
};

export const NodeComponent = <T,>({onNodeClick}: NodeComponentProps<T>) => {
    return null;
}