0

我正在尝试使用 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;

我不明白为什么 JSX 片段被 Typescript 解析为布尔值。我在这里做错了什么？

4

1 回答 1

3

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

感谢大家！

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

于 2019-10-08T23:45:24.557 回答