Reactjs 命名空间“React”没有导出的成员“FC”

我通过运行

npx create-react-app myApp --typescript

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

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

---

如何解决这个问题？

我刚刚用typescript创建了一个新的sanbox。尝试将其设置与项目进行比较。您甚至可以将其作为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>
  );
};

---

createreact应用程序的文档指出，如果你曾经在全球范围内安装过他们的软件包，你就必须卸载它。npm卸载-g创建react应用程序

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

---

这可能会阻止您的应用程序在create react应用程序上读取正确的配置。您拥有的全局版本可能是js和本地ts，如果运行了全局create react app脚本，则不会传输ts。

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

npx create-react-app myapp --typescript

首先，您不能在项目名称中使用任何大写字母

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

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

我的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完美地为我工作

React.FC已从创建React应用程序CRA中删除，请参阅：

尝试在顶部添加：导入*作为React from React；仍然存在相同的错误执行npx create react app myApp-typescript失败，错误为：由于npm命名限制，无法创建名为“myApp”的项目：*名称不能再包含大写字母，请选择其他项目名称。所以我重新执行了它，将“myApp”改为“myApp”，然后将代码添加到myApp\src\App.tsx并运行了构建。它编译和构建得很好。我建议你也这样做。它仍然不起作用。我也尝试过React.FunctionComponent，您使用的React版本React.FC仅在16.8版本在沙盒上可用，但令人费解的是，即使在下载并运行npm安装后也无法工作！真奇怪。我更新了我的答案。您还应该检查节点版本。我没有更好的主意了？我以前从未使用过React.FC，但错误似乎是没有从React导出FC。在创建react应用程序包中，我只看到react.Component。@SydneyY react.FC是功能组件的类型脚本类型。如果你创建了一个更大的项目，可以尝试使用Typescript。我已经为自己确认了FC的存在。但是createreact应用程序的文档指出，如果你曾经在全球范围内安装过他们的软件包，你就必须卸载它。npm卸载-g创建react应用程序

  "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"
    ]
  }
}

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;