Question

以下功能在.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.

Answer 1

看起来像.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>
    )
};

如何将泛型类型传递给typescript tsx文件中的匿名函数

1 个答案: