Typescript Utils class return React Component

Question

我正在做一个typescript React项目，并尝试编写一些实用程序类。不过，我在以这种方式返回React组件时遇到了问题，不确定我应该做什么/什么是最佳实践。我得到了"；指的是一个值，但在此处用作类型"错误，除非我使用tsx文件，在这种情况下，它无法正确导入。同样值得注意的是，抛出@ts忽略可以减轻该错误，但随后错误为"忽略"；未终止的正则表达式文字"；

编辑：这是<SomeIcon />等的错误

这是我的BoxUtils.ts

export abstract class BoxUtils {
public static getIconForStatus(box: BoxModel): Icon | null {
switch(box.status) {
case 'StatusOne':
return <SomeIcon />;
case 'StatusTwo':
return <SomeOtherIcon />;
case 'StatusThree':
return <YetAnotherIcon />;
default:
return null;
}
}
}

这是我将使用util的一个片段：<div>{BoxUtils.getIconForStatus(row)}</div>

Answer 1

您在下面几行中包含的语法是JSX语法，这意味着它们包含的ES6组件不是Typescript语言的解释器。

return <SomeIcon />;
return <SomeOtherIcon />;
return <YetAnotherIcon />;

但是，您可以通过将文件标记为.tsx而不是.ts来包含这些语法功能。如果只包含typescript函数或类型，则可以只使用.ts文件扩展名。