Actualicé a React 18 y las cosas se compilaron bien. Hoy parece que todos los componentes que usan niños arrojan un error. Property 'children' does not exist on type 'IPageProps'.
Antes, los accesorios para niños se incluían automáticamente en la interfaz FC . Ahora parece que tengo que agregar children: ReactNode . ¿Cuál es el tipo de mecanografiado correcto para reaccionar niños?
¿Es esto parte de la actualización de React 18, o algo está mal en mi env?
paquete.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"] }Aunque esta respuesta es correcta, quiero señalar que no es necesario que use este asistente de PropsWithChildren . (Es principalmente útil para el codemod , no para el uso manual).
En cambio, me resulta más fácil definirlos manualmente.
import * as React from 'react'; type Props = {}; const Component: React.FC<Props> = ({children}) => {...} import * as React from 'react'; type Props = { children?: React.ReactNode }; const Component: React.FC<Props> = ({children}) => {...}Eso es todo lo que se necesita.
O puede dejar de usar React.FC por completo.
import * as React from 'react'; type Props = { children?: React.ReactNode }; function Component({children}: Props): React.ReactNode { ... } En React, children son un accesorio habitual y no es algo especial. Por lo tanto, debe definirlo tal como define todos los demás accesorios. Las tipificaciones anteriores que lo ocultaban estaban equivocadas.
import React from 'react'; const Component: React.FC = ({children}) => {...}Cree, por ejemplo, react.d.ts para definir su ayudante tipo 1
export type PropsWithChildrenOnly = PropsWithChildren<unknown>; export type ReactFCWithChildren = React.FC<PropsWithChildrenOnly>; import React from 'react'; import { PropsWithChildrenOnly, ReactFCWithChildren } from './react'; const Component: React.FC<PropsWithChildrenOnly> = ({children}) => {...}o
const Component: ReactFCWithChildren = ({children}) => {...} import React from 'react'; interface Props { ... } const Component: React.FC<Props> = ({children}) => {...} import React, { PropsWithChildren } from 'react'; interface Props { ... } const Component: React.FC<PropsWithChildren<Props>> = ({children}) => {...}o
interface Props extends PropsWithChildren<unknown> { ... } const Component: React.FC<Props> = ({children}) => {...} 1 Si bien definir children manualmente parece fácil, es mejor aprovechar los tipos que ya están preparados para usted en el paquete @types. Cuando haya cambios en el tipo en el futuro, se propagará automáticamente desde la biblioteca en todas partes de su código para que no tenga que tocarlo usted mismo.
Puede anular los tipos de reacción creando un archivo react.d.ts con la siguiente definición que revertiría el tipo a @types/react v17
import * as React from '@types/react'; declare module 'react' { interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null; } } children prop se eliminó de React.FunctionComponent ( React.FC ), por lo que debe declararlo explícitamente.
TS le dirá errores como
Escriba '{ niños: ...; }' no tiene propiedades en común con el tipo 'IntrinsicAttributes'".
Puedes leer por qué aquí . TLDR previene errores como
const ComponentWithNoChildren: React.FC = () => <>Hello</>; ... <ComponentWithNoChildren> // passing children is wrong since component does not accept any <UnusedChildrenSinceComponentHasNoChildren /> </ComponentWithNoChildren>Parece que se eliminó el atributo de children en las escrituras mecanografiadas .
Tuve que agregar niños manualmente a mis accesorios; Probablemente haya una mejor solución para arreglar esto, pero mientras tanto, esto funciona.