命名空间“React”没有导出成员“FC”答案

【问题标题】：Namespace 'React' has no exported member 'FC'命名空间“React”没有导出成员“FC”
【发布时间】：2020-04-24 16:56:19
【问题描述】：

我通过运行创建了一个新的反应应用程序

npx create-react-app myApp --typescript

我还将@types/react 和@types/react-dom 更新为最新版本，但是，当我尝试像这样声明组件的类型时，此错误仍然存在

export const Header: React.FC = () => {
  return <div />;
};

我该如何解决这个问题？

【问题讨论】：

尝试在顶部添加：import * as React from "react";
还是同样的错误
执行 npx create-react-app myApp --typescript 失败并出现错误：“由于 npm 命名限制，无法创建名为 'myApp' 的项目：* 名称不能再包含大写字母请选择其他项目名称。” 所以我重新执行它，将“myApp”更改为“myapp”，然后将您的代码添加到myapp\src\App.tsx 并运行yarn build。它编译和构建很好。我建议你也这样做。
还是不行。我也尝试过 React.FunctionComponent
你使用的是哪个 React 版本 React.FC 仅在 16.8 后可用

标签： reactjs typescript

【解决方案1】：

我刚刚使用 typescript 创建了一个新的 sanbox。 https://codesandbox.io/s/zealous-nobel-phcd7 。尝试将其设置与您的项目进行比较。您甚至可以将其下载为 zip 文件并从中启动新项目。

import * as React from "react";
import "./styles.css";

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

更新

我下载了 zip 文件。这个对我有用。我能想到的只有全局安装的 npm 版本。

您可以通过以下方式检查它们：

npm list -g --depth 0

我不知道我的版本对你有帮助，但它对我有用：

├── create-react-app@3.3.1
├── firebase-tools@7.6.1
├── ionic@5.4.6
├── nlf@1.4.3
├── npm@6.13.7
├── nsp@2.8.0
├── ts-node@8.0.3
└── typescript@3.3.3333

【讨论】：

在沙箱上工作，但莫名其妙在下载并运行npm install后也无法工作！
真的很奇怪。我更新了我的答案。您还应该检查节点版本。我没有更好的主意。
React.Component?我以前从未使用过 React.FC，但错误似乎是没有从 React 导出的 FC。使用 create-react-app 包，我只见过 React.Component。
@SydneyY React.FC 是功能组件的打字稿类型。如果你创建一个更大的项目，有时可以试试 Typescript。
我已经为自己确认了 FC 的存在。但是 create-react-app 的文档指出，如果您曾经在全球范围内安装过他们的软件包，则必须将其卸载。 npm uninstall -g create-react-appcreate-react-app.dev/docs/adding-typescript

【解决方案2】：

我刚刚使用这个命令创建了一个新项目

npx create-react-app myapp --typescript

（首先你们不能在项目名称中使用任何大写字母）

并尝试创建这样的组件类型，它对我的工作正常没有错误显示

export const Header: React.FC = () => {
  return <div />;
};

也许你的 package.json 文件有一些版本问题我的 package.json 文件是这样的

  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我的 App.jsx 文件看起来像

import React from "react"
import logo from './logo.svg';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

React.FC 完美地为我工作

【讨论】：

【解决方案3】：

React.FC 已从 create-react-app CRA 中删除，请参阅：https://github.com/facebook/create-react-app/pull/8177

【讨论】：

【解决方案4】：

create-react-app 的文档指出，如果您曾经在全球范围内安装过他们的软件包，则必须将其卸载。 npm uninstall -g create-react-app

create-react-app.dev/docs/adding-typescript

这可能会阻止您的应用读取 create-react-app 上的正确配置。您拥有的全局版本可能是 js 和本地 ts，然后如果运行全局 create-react-app 脚本，它不会转译 ts。

【讨论】：