React 18 TypeScript 儿童 FC

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

在儿童道具自动包含在之前FC界面。现在看来我必须手动添加children: ReactNode. 对于反应儿童来说，正确的打字稿类型是什么？ https://stackoverflow.com/questions/61236537/what-is-the-correct-typescript-type-for-react-children

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

虽然这个答案 https://stackoverflow.com/a/71800185/458193是正确的，我想指出的是你绝对不have to用这个PropsWithChildren帮手。 （它主要用于codemod https://github.com/eps1lon/types-react-codemod#implicit-children，而不是手动使用。）

相反，我发现手动定义它们更容易。

Before

import * as React from 'react';

type Props = {};
const Component: React.FC<Props> = ({children}) => {...}

After

import * as React from 'react';

type Props = {
  children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}

这就是所需要的一切。

或者您可以停止使用React.FC共。

import * as React from 'react';

type Props = {
  children?: React.ReactNode
};

function Component({children}: Props): React.ReactNode {
  ...
}

在反应中，children是一个普通的道具，并没有什么特别的。因此，您需要像定义所有其他 props 一样定义它。之前隐藏它的打字是错误的。