reactjs - 如何在 typescript tsx文件中将泛型传递给匿名函数

以下函数在.tsx文件中失败：

export const withComponent = <T>(Component: React.ComponentType<T>) => (props: any) => (
  <shortcutContext.Consumer>
    {addShortcut => <Component addShortcut={addShortcut} {...props} />}
  </shortcutContext.Consumer>
);

错误JSX element 'T' has no corresponding closing tag.

最佳答案

看起来像是.tsx语法分析器的限制，没有办法让这个特殊的<作为通用参数的分隔符而不是开始标记。
但对于这种特殊情况，解决方法很简单。
export const暗示这是在顶层，并且它的实现无论如何都不引用this，所以它可以用旧的样式函数重写而不是第一个=>：

export const withComponent = function<T>(Component: React.ComponentType<T>) {
    return (props: any) => (
        <shortcutContext.Consumer>
            {addShortcut => <Component addShortcut={addShortcut} {...props} />}
        </shortcutContext.Consumer>
    )
};

关于reactjs - 如何在 typescript tsx文件中将泛型传递给匿名函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50611757/