programing

react - typescript를 사용하여 컨텍스트를 만들 때 네임스페이스 'ctx'를 찾을 수 없습니다.

shortcode 2023. 4. 3. 22:52
반응형

react - typescript를 사용하여 컨텍스트를 만들 때 네임스페이스 'ctx'를 찾을 수 없습니다.

프로젝트 진행 중인데react사용.typescript이 에러가 발생하는 이유를 파악하는데 어려움을 겪고 있습니다.기본적으로 이 에러는 사용할 수 없습니다.createContext이것 때문에 인터넷에서 찾은 예들.특히 여기서 얻은 것입니다.https://github.com/typescript-cheatsheets/react-typescript-cheatsheet '콘텍스트' 섹션에 나와 있는 것과 같은 것을 사용하려고 합니다.

import * as React from "react";

export function createCtx<A>(defaultValue: A) {
type UpdateType = React.Dispatch<React.SetStateAction<typeof defaultValue>>;
const defaultUpdate: UpdateType = () => defaultValue;
const ctx = React.createContext({
    state: defaultValue,
    update: defaultUpdate
});
function Provider(props: React.PropsWithChildren<{}>) {
    const [state, update] = React.useState(defaultValue);
    return <ctx.Provider value={{ state, update }} {...props} />;
}
return [ctx, Provider] as [typeof ctx, typeof Provider];
}

문제는 이 오류가 발생할 때마다 네임스페이스를 찾을 수 없다는 것입니다.ctx행:

        return <ctx.Provider value={{ state, update }} {...props} />;

왜 그런지 아직도 모르겠어요. 누군가 제가 잘못하고 있는지 알 수 있어요?이것은 tsconfig.json 입니다.

{
"compilerOptions": {
"target": "es5",
"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"noImplicitAny": false,
"strictNullChecks": false
},
"include": [
"src"
]
}

어떤 도움이라도 주시면 감사하겠습니다!

파일 확장자는 다음과 같습니다..ts대신.tsx.

따라서 TypeScript는 다음과 같이 해석합니다.<ctx.Provider배역을 맡아 활자를 찾으려 한다Provider네임스페이스에ctx.

언급URL : https://stackoverflow.com/questions/57242264/cannot-find-namespace-ctx-error-when-creating-context-with-react-typescript

반응형