使用 react-typescript 创建上下文时找不到命名空间“ctx”错误

IT技术 reactjs typescript ionic4
2021-04-08 13:50:44

我正在react使用 using进行一个项目,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"
]
}

任何帮助,将不胜感激!

2个回答

您的文件扩展名很可能.ts不是.tsx.

因此,TypeScript 将解释<ctx.Provider为 cast 并尝试Provider在 namespace 中查找类型ctx

每一次......我开始一个新项目并撞到这堵墙并花了太长时间试图自己修复它......谢谢你的好心先生。再次...
2021-05-23 13:50:44
这已经咬了我很多次了。感谢您记下它,这是一个很容易犯的错误。
2021-05-27 13:50:44
花了太多时间试图弄清楚这一点。简直不敢相信这么简单。
2021-06-08 13:50:44
伟大的!!很简单!
2021-06-19 13:50:44

请使用tsx而不是ts它有一些细微的差异。tsx 显然允许在typescript中使用 jsx 标签。