Question

我正在尝试使用TypeScript定义一个更高阶的组件，但出现了奇怪的错误。

我尝试查看反应类型定义来理解问题，但没有成功。

以下代码是使用'create-react-app'-'create-react-app hoc --typescript'生成的React应用的一部分

import React from 'react';

const wrapper = (ChildComponent:React.ComponentType) => {

  const ComposedComponent:React.FC = ():JSX.Element => {

      return (
        // The line below results in the error - 'Type 'boolean' is not assignable to type 'Element'.ts(2322)'
        <div>Hello</div> 

      );
  };

  return ComposedComponent;

};

这是我的tsconfig.json-

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

这是我运行应用程序时出现的打字稿错误-

Unterminated regular expression literal.  TS1161

    3 | const wrapper = (ChildComponent: React.ComponentType) => {
    4 |   const ComposedComponent: React.FC = (): JSX.Element => {
  > 5 |     return <div>Hello</div>;
      |                        ^
    6 |   };
    7 | 
    8 |   return ComposedComponent;

我不明白为什么TypeType将JSX代码段解析为布尔值。我在这里做什么错了？

Answer 1

这很愚蠢。看起来要使用JSX，文件扩展名应该为'tsx'。我的是“ ts”。我将扩展名更改为“ tsx”，错误消失了。超级令人沮丧。

谢谢大家！

我还没有弄清楚如何将道具传递给包装器并最终传递给ChildComponent

使用TypeScript创建高阶组件（HOC）

1 个答案: