欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決React報(bào)錯(cuò)Cannot?find?namespace?context

 更新時(shí)間:2022年12月01日 16:50:04   作者:Borislav?Hadzhiev  
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot?find?namespace?context分析解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

總覽

在React中,為了解決"Cannot find namespace context"錯(cuò)誤,在你使用JSX的文件中使用.tsx擴(kuò)展名,在你的tsconfig.json文件中把jsx設(shè)置為react-jsx,并確保為你的應(yīng)用程序安裝所有必要的@types包。

這里有個(gè)例子來展示錯(cuò)誤是如何發(fā)生的。

// App.ts
import React from 'react';
interface UserCtx {
  first: string;
  last: string;
  age: number;
}
const AuthContext = React.createContext<UserCtx | null>(null);
const authContext: UserCtx = {
  first: 'James',
  last: 'Doe',
  age: 30,
};
const App = () => {
  // ?? Cannot find namespace 'AuthContext'.ts(2503)
  return (
    <AuthContext.Provider value={authContext}>
      <h2>Your app here</h2>
    </AuthContext.Provider>
  );
};
export default App;

上述代碼片段的問題在于,文件的擴(kuò)展名為.ts ,但是我們?cè)诶锩婢帉慗SX代碼。

tsx

這是不被允許的,因?yàn)闉榱四茉赥ypeScript文件中使用JSX,我們必須這樣做:

  • .tsx擴(kuò)展名命名文件
  • tsconfig.json文件中開啟jsx選項(xiàng)

確保所有你編寫JSX代碼的文件都有.tsx擴(kuò)展名。

// App.tsx
import React from 'react';
interface UserCtx {
  first: string;
  last: string;
  age: number;
}
const AuthContext = React.createContext<UserCtx | null>(null);
const authContext: UserCtx = {
  first: 'James',
  last: 'Doe',
  age: 30,
};
const App = () => {
  return (
    <AuthContext.Provider value={authContext}>
      <h2>Your app here</h2>
    </AuthContext.Provider>
  );
};
export default App;

更新完文件的擴(kuò)展名為.tsx后,如果問題仍未解決,請(qǐng)嘗試重啟你的IDE和開發(fā)服務(wù)器。

打開tsconfig.json文件,并確保jsx選項(xiàng)被設(shè)置為react-jsx。

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx", // ??? make sure you have this
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*"]
}

當(dāng)jsx選項(xiàng)被設(shè)置為react-jsx時(shí),它會(huì)導(dǎo)致編譯器拋出.js文件,其中的JSX被改為_jsx調(diào)用。

如有必要請(qǐng)重啟你的IDE和開發(fā)服務(wù)器。你的開發(fā)服務(wù)器不會(huì)接收這些變化,直到你停止它并重新運(yùn)行npm start命令。

安裝@types/包

在React中出現(xiàn)"Cannot find namespace context"錯(cuò)誤的另一個(gè)原因是,我們沒有安裝必要的@types/包。

在項(xiàng)目的根路徑下打開終端,并運(yùn)行以下命令:

# ??? with NPM
npm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript
# ------------------------------------------------------
# ??? with YARN
yarn add @types/react @types/react-dom @types/node @types/jest typescript --dev

該命令為react,react-dom,node,jest安裝類型聲明文件,并安裝typescript包。

如果仍然報(bào)錯(cuò),嘗試刪除node_modulespackage-lock.json文件(不是package.json),重新運(yùn)行npm install并重啟你的IDE。

# ??? delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock
# ??? clean npm cache
npm cache clean --force
npm install

如果錯(cuò)誤仍然存在,請(qǐng)確保重新啟動(dòng)你的IDE和開發(fā)服務(wù)器。VSCode經(jīng)常出現(xiàn)故障,重啟有時(shí)會(huì)解決一些問題。

手動(dòng)添加

如果你仍然得到"Cannot find namespace Context"的錯(cuò)誤,打開你的package.json文件,確保它在devDependencies對(duì)象中包含以下包。

// package.json
{
  // ... rest
  "devDependencies": {
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "typescript": "^4.6.3"
  }
}

你可以嘗試手動(dòng)添加上述依賴,并重新運(yùn)行npm install

npm install

或者安裝依賴包的最新版本:

# ??? with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest
# ------------------------------------------------------
# ??? with YARN
yarn add @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest --dev

原文鏈接:bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)Cannot find namespace context的詳細(xì)內(nèi)容,更多關(guān)于React報(bào)錯(cuò)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 初識(shí)React及React開發(fā)依賴詳解

    初識(shí)React及React開發(fā)依賴詳解

    React由Facebook來更新和維護(hù),它是大量?jī)?yōu)秀程序員的思想結(jié)晶,React的流行不僅僅局限于普通開發(fā)工程師對(duì)它的認(rèn)可,大量流行的其他框架借鑒React的思想,接下來通過本文介紹React基礎(chǔ)及React開發(fā)依賴介紹,需要的朋友可以參考下
    2022-10-10
  • 圖文示例講解useState與useReducer性能區(qū)別

    圖文示例講解useState與useReducer性能區(qū)別

    這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • 如何強(qiáng)制刷新react hooks組件

    如何強(qiáng)制刷新react hooks組件

    這篇文章主要介紹了如何強(qiáng)制刷新react hooks組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • useReducer使用詳解及其應(yīng)用場(chǎng)景

    useReducer使用詳解及其應(yīng)用場(chǎng)景

    這篇文章主要介紹了useReducer使用詳解及其應(yīng)用場(chǎng)景,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React + webpack 環(huán)境配置的方法步驟

    React + webpack 環(huán)境配置的方法步驟

    本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟,詳解的介紹了開發(fā)環(huán)境的配置搭建,有興趣的可以了解一下
    2017-09-09
  • React diff算法的實(shí)現(xiàn)示例

    React diff算法的實(shí)現(xiàn)示例

    這篇文章主要介紹了React diff算法的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • 通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖

    通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖

    這篇文章主要介紹了通過實(shí)例學(xué)習(xí)React中事件節(jié)流防抖,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下
    2019-06-06
  • react-native中路由頁面的跳轉(zhuǎn)與傳參的實(shí)例詳解

    react-native中路由頁面的跳轉(zhuǎn)與傳參的實(shí)例詳解

    這篇文章主要介紹了react-native中路由頁面的跳轉(zhuǎn)與傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08
  • 2個(gè)奇怪的react寫法

    2個(gè)奇怪的react寫法

    大家好,我卡頌。雖然React官網(wǎng)用大量篇幅介紹最佳實(shí)踐,但因JSX語法的靈活性,所以總是會(huì)出現(xiàn)奇奇怪怪的React寫法。本文介紹2種奇怪(但在某些場(chǎng)景下有意義)的React寫法。也歡迎大家在評(píng)論區(qū)討論你遇到過的奇怪寫法
    2023-03-03
  • Ant?Design?組件庫之步驟條實(shí)現(xiàn)

    Ant?Design?組件庫之步驟條實(shí)現(xiàn)

    這篇文章主要為大家介紹了Ant?Design組件庫之步驟條實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08

最新評(píng)論