programing

React 18 TypeScript 자녀 FC

testmans 2023. 3. 31. 21:55
반응형

React 18 TypeScript 자녀 FC

리액트 18로 업그레이드 했는데 잘 정리됐어요.오늘날에는 어린이를 사용하는 모든 구성 요소가 오류를 발생시키는 것 같습니다. Property 'children' does not exist on type 'IPageProps'.

으로 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★FC인터페이스입니다. 수동으로 추가해야 할 것 요.children: ReactNode리액트 아동을 위한 올바른 활자 타입은 무엇입니까?

이건 리액트 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"]
}

이 답변은 맞지만, 꼭 이것을 사용할 필요는 없습니다.PropsWithChildren도우미. (주로 수동 사용이 아닌 코드모드에 유용합니다.)

대신 수동으로 정의하는 것이 더 쉽습니다.

전에

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}) => {...}

그것만 있으면 돼요.

쓰셔도 .React.FC다같이.

import * as React from 'react';

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

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

「」입니다.children이치노다른 모든 소품을 정의하는 것과 마찬가지로 정의해야 합니다.그것을 숨긴 이전의 오타가 틀렸다.

해결 방법

소품 없음

전에

import React from 'react';

const Component: React.FC = ({children}) => {...}

끝나고

예를 들어 react.d.ts를 생성하여 도우미 유형을 정의합니다. 1

import React from 'react';

export type ReactFCWithChildren = React.FC<PropsWithChildren>;

import {ReactFCWithChildren } from './react';

const Component: ReactFCWithChildren = ({children}) => {...}

또는

import React from 'react';

const Component: React.FC<React.PropsWithChildren> = ({children}) => {...}

소품 포함

전에

import React from 'react';

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

끝나고

import React from 'react';

interface Props {
  ...
}
const Component: React.FC<React.PropsWithChildren<Props>> = ({children}) => {...}

또는

import React from 'react';

interface Props extends React.PropsWithChildren {
  ...
}

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

1개 While defining children manually seems easy, it's better to leverage types that are already prepared for you in @types package. When there are changes to the type in the future, it will automatically propagate from the lib everywhere in your code so you won't have to touch it yourself.

어떤 이유로 경고를 억제하다

타입은 리액션 할 수 .react.d.ts@ @types/v17 @types/v17 types @ @ 정의를 

import * as React from '@types/react';

declare module 'react' {
  interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  }
}

FC 시그니처가 변경된 이유

childrenReact.FunctionComponent )React.FC따라서 명시적으로 선언해야 합니다.

TS는 다음과 같은 오류를 알려줍니다.

'{ children: ...'을 입력합니다.; }'에는 'IntrinsicAttributes' 유형과 공통 속성이 없습니다.

왜 그런지는 여기서 알 수 있어요.TLDR은 다음과 같은 버그를 방지합니다.

const ComponentWithNoChildren: React.FC = () => <>Hello</>;

...

<ComponentWithNoChildren>
   // passing children is wrong since component does not accept any
   <UnusedChildrenSinceComponentHasNoChildren /> 
</ComponentWithNoChildren>

네, 리액트.FC 타입이 변경되었습니다.하지만 블랙잭으로 자신의 타입을 선언하고 아이들에게 반응할 수 있습니다.

은 내법가가 my를 만드는 것이다.src/types/react.d.ts하다

import React, { PropsWithChildren } from 'react';

export type ReactFCC<T> = React.FC<PropsWithChildren<T>>;

업데이트 #01

기본값을 할 수 .T★★★★★★★★★★★★★★★★★★:

import React, { PropsWithChildren } from 'react';

export type ReactFCC<T = Record<string, unknown>> = React.FC<PropsWithChildren<T>>;

또는

import React, { PropsWithChildren } from 'react';

export type ReactFCC<T = unknown> = React.FC<PropsWithChildren<T>>;

으로, 「유형」, 「을 지정하지 .ReactFCC경고 없이 일반적입니다.

이전:

export const Component: ReactFCC<SomeType> = props => {

  const { children } = props;
  
  /* ... */
}

그 후:

export const Component: ReactFCC = props => {

  const { children } = props;
  
  /* ... */
}

한다(기능 컴포넌트 타입의 ).FC를 참조해 주세요.

을 붙입시다.FCC - 컴포넌트 children (표기: - 기능 컴포넌트);) (표기: - 기능 컴포넌트(자녀 포함); )

// Put this in your global types.ts

import { FC, PropsWithChildren } from "react";

// Custom Type for a React functional component with props AND CHILDREN
export type FCC<P={}> = FC<PropsWithChildren<P>>

때 childrenprops 합니다.

// import FCC from types.ts
const MyComponent: FCC = ({children}) => {
  return (
    <>{children}</>
  )
}

또는

interface MyCompoProps{
  prop1: string
}

const MyComponent: FCC<MyCompoProps> = ({children, prop1}) => {
  return (
    <>{children}</>
  )
}

추신 이 답변은 @Garvae의 답변과 비슷해 보일 수 있습니다.ReactFCC<P> type라고 한다ReactFCC<P={}>하려면 , 「」를 참조해 주세요.

Generic type 'ReactFCC' requires 1 type argument(s)

.어린이 소품은 옵션 소품이어야 합니다. 그 을 디폴트 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」{}e:P = {}을 사용하다

타이프 텍스트 타이핑의 Atribute가 삭제된 것 같습니다.

소품에 아이들을 수동으로 추가해야 했습니다.이 문제를 해결하기 위한 더 나은 해결책이 있을 수 있지만, 그 사이에 이 방법이 효과가 있습니다.

처럼, 필요하지 도 있습니다.React.FC더이상.다음은 플레인 사용을 선택하는 경우에 대한 추가 제안입니다.function.

하위 항목이 없는 구성 요소

import * as React from 'react';

type Props = {
};

export function Component({}: Props) {
  ...
}

<Component /> // Valid
<Component>test</Component> // Invalid

자녀가 있는 컴포넌트

import * as React from 'react';

type Props = {
  children: React.ReactNode
};

export function Component({children}: Props) {
  ...
}

<Component>test</Component> // Valid
<Component /> // Invalid

자녀가 있는 컴포넌트(옵션)

import * as React from 'react';

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

export function Component({children}: Props) {
  ...
}

<Component>test</Component> // Valid
<Component /> // Valid

리액트 사용반환 유형으로서의 ReactNode는 이러한 구성 요소를 다른 구성 요소의 위에서 렌더링하면 [tsserver 2786] [E] '예'를 JSX 구성 요소로 사용할 수 없기 때문에 권장되는 것으로 보이지 않습니다.반환 형식 'ReactNode'는 올바른 JSX 요소가 아닙니다.'undefined' 유형은 'Element | null' 유형에 할당할 수 없습니다.다음을 수행하십시오. 함수 예제(): 반응.ReactNode {return }, 함수 기타(): 반응.ReactNode {return}

반환 유형을 완전히 생략하는 것이 더 나을 수 있습니다. 구성 요소를 사용하려는 코드가 있는 한 tsserver는 잘못된 반환에 대해 자동으로 경고합니다.함수 예() {}: 이와 같이 동일한 파일에 용도를 넣을 수 있습니다. 그러면 잘못된 경우 tsserver에서 경고를 보냅니다.변수에 할당하는 것을 생략할 수도 있습니다.

먼저 글로벌인터페이스를 정의해야 합니다.

import { PropsWithChildren } from "react";

interface ReactFC<T = {}> extends React.FC<PropsWithChildren<T>> {}

컴포넌트 소품

    interface ReceiptProps {
       onSubmitForm: () => void;
       orderId: number;
    } 

    const Receipt: ReactFC<ReceiptProps> = ({orderId, onSubmitForm,children }) => {
        return <div> { children } </div>
    }

Function Component'는 피하는 것이 좋다고 생각합니다.FC' 및 다음 작업을 수행합니다.이를 통해 'Function Component' 유형 선언을 준수해야 하는 추가 부담을 피할 수 있습니다.

import React, {ReactNode} from 'react';

interface Props {
    children: ReactNode;
}

function Component({children}: Props):JSX.Element {
    return (
        <div>{children}</div>
    );
}

export default Component;

하위 호환 FC17/VFC17 유형을 선언할 수 있습니다.

프로젝트에 다음 파일을 추가합니다.

types.d.ts

import {FunctionComponent, PropsWithChildren} from 'react';

declare module 'react' {
    type FC17<P = {}> = FunctionComponent<PropsWithChildren<P>>;
    type VFC17<P = {}> = FunctionComponent<P>;
}

이제 소스 코드에서 발생하는 모든 FC 및 VFC를 검색/바꾸어 새 유형을 사용할 수 있습니다.대소문자를 사용하고 정확한 단어를 일치시키세요.

컴포넌트 코드는 다음과 같습니다.

import {FC17} from 'react';

export const MyComponent: FC17 = ({children}) => {
    return <div>{children}</div>;
};

이제 작업을 계속하고 코드를 점진적으로 수정하여 원하는 대로 새로운 React 18 유형을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc

반응형

'programing' 카테고리의 다른 글

component Did Mount는 정확히 언제 실행됩니까?  (0) 2023.03.31
bcc와 cc로 wp_mail로 이메일 보내기  (0) 2023.03.31
배포 시 Amazon Beanstalk 오류  (0) 2023.03.31
유니코드 문자를 표시/복호화하는 Javascript 대응  (0) 2023.03.31
인젝터가 이미 생성되었습니다.모듈을 등록할 수 없습니다.  (0) 2023.03.31

'programing'의 다른글

  • 현재글React 18 TypeScript 자녀 FC

관련글

댓글

티스토리툴바