命名空间 'React' 没有导出的成员 'FC'

Question

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

npx create-react-app myApp --typescript

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

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

我该如何解决这个问题？

Answer 1

我刚刚用打字稿创建了一个新的 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

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

Answer 3

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

Answer 4

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

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

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