如何修复Typescript - Next.js构建错误?

Question

当我构建我的小Typescript - Nextjs项目时，出现如下类型错误

./components/Layout.tsx:3:55
Type error: Cannot find namespace 'React'.

1 | import NavBar from "@components/NavBar";
2 | 
> 3 | export default function Layout({children} :{children :React.ReactNode}){
|                                                       ^
4 |   return (
5 |     <>
6 |       <NavBar/>
info  - Checking validity of types .%

布局。TSX只是

import NavBar from "@components/NavBar";
export default function Layout({children} :{children :React.ReactNode}){
return (
<>
<NavBar/>
<div>
{children}
</div>
</>
)
}

和_app。tsx是

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '@components/Layout'
import { Provider } from 'react-redux'
import store from '@/store'
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Layout>
<Component {...pageProps} />
</Layout>
</Provider>
)
}
export default MyApp

和包。json是

{
"name": "bi-front",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "NODE_ENV=development next dev",
"build": "NODE_ENV=development next build",
"start": "NODE_ENV=production next start",
"lint": "NODE_ENV=development next lint"
},
"dependencies": {
"@reduxjs/toolkit": "^1.8.3",
"@types/react-datepicker": "^4.4.2",
"@types/react-redux": "^7.1.24",
"apexcharts": "^3.35.3",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"dayjs": "^1.11.3",
"dotenv": "^16.0.1",
"mongoose": "^6.4.0",
"next": "12.1.6",
"path": "^0.12.7",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-csv-downloader": "^2.8.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-select": "^5.3.2",
"redux": "^4.2.0",
"tailwindcss": "^3.1.3",
"typesafe-actions": "^5.1.0"
},
"devDependencies": {
"@types/node": "18.0.0",
"@types/react": "^18.0.15",
"@types/react-dom": "18.0.5",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"typescript": "4.7.4"
}
}

我不只使用_app的原因。tsx但是布局。tsx更简单的管理组件。

我认为这是一个简单的错误，但这是我的第一个Typescript - Nextjs项目，所以我不知道怎么修理它。

请理解我不擅长英语，请帮帮我:

Answer 1

你必须在你的文件上导入React，或者导入确切的类型并使用它，例如

import { ReactNode } from 'react';
export default function Layout({children}: {children: ReactNode}) {
/* OR */
import React from 'react';
export default function Layout({children}: {children: React.ReactNode}) {