我升级到 React 18 并且编译得很好。如今，似乎每个使用子组件的组件都会抛出错误。Property 'children' does not exist on type 'IPageProps'.

在儿童道具自动包含在FC界面中之前。现在看来我必须手动添加children: ReactNode。对于反应儿童来说，正确的打字稿类型是什么？

这是 React 18 更新的一部分，还是我的环境出了问题？

包.json

"react": "^18.0.0",
"react-dom": "^18.0.0",
"next": "12.1.4",
"@types/react": "18.0.0",
"@types/react-dom": "18.0.0",

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "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": "preserve",
    "alwaysStrict": true,
    "sourceMap": true,
    "incremental": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

我有一个用 typescript 编写的 Express 服务器，并"module": "es2020"在其 tsconfig.xml 中。

我还es2020为我的 graphql API 开发了另一个模块，仍然是 typescript，这个模块使用 mongoose 和这样的命名导入：

import { Types } from 'mongoose'

当我用 编译我的 graphql 模块时，一切正常tsc。但是运行的快递服务器

nodemon --watch './**/*.ts' --exec 'node --experimental-specifier-resolution=node --loader ts-node/esm' src/index.ts

无法处理名为 import 的猫鼬。

import { Types } from 'mongoose';
         ^^^^^
SyntaxError: Named export 'Types' not found. The requested module 'mongoose' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via …

问题

import React, { useContext, useEffect, useRef } from 'react';

我打开esModuleInterop并allowSyntheticDefaultImports进入tsconfig.json。
我还使用eslint-import-plugin和eslint-import-resolver-typescript来检查导入的情况。

但是，eslint 说“ No default export found in imported module "react".”

如何解决这个问题？

背景

技术堆栈

• 反应：18.2.0
• @类型/反应：18.0.14
• 打字稿：4.7.4
• eslint：8.18
• @typescript-eslint/eslint-插件：5.30
• @typescript-eslint/解析器：5.30.5
• eslint-导入解析器-打字稿：3.1.1
• eslint 插件导入：2.26
• eslint-插件-反应：7.30 ...

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "jsx": …

我对React或一般的编码背景还是陌生的。我不确定以上声明之间有什么区别。提前致谢！

\n

从 \xe2\x80\x98react\xe2\x80\x99 导入 * as React

\n

建议使用流类型 I\xe2\x80\x99m 并像这样导入 React。我的问题是这是否会对摇树产生影响？这是否会导入超出我需要的内容并增加我的 js 文件大小？