React js自动更改"jsx"："react-jsx“改为"jsx"：”保存“

Question

当我试图运行react项目时，tsconfig文件被自动更改为"jsx": "preserve"，之后我得到了这样的错误

×
←→1 of 3 errors on the page
ReferenceError: React is not defined
App
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/src/App.tsx:6
  3 | import CustomRoutes from './components/Routes';
  4 | 
  5 | function App() {
> 6 |   return (
  7 |     <div className="App">
  8 |         {/* <MuiTypography /> */}
  9 |       <CustomRoutes />
View compiled
renderWithHooks
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:14141
  14138 |     ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
  14139 |   }
  14140 | }
> 14141 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  14142 | 
  14143 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
  14144 |   // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:17432
  17429 |   }
  17430 |   setIsRendering(true);
  17431 |   ReactCurrentOwner$1.current = workInProgress;
> 17432 |   value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
        | ^  17433 |   hasId = checkDidRenderIdHook();
  17434 |   setIsRendering(false);
  17435 | }
View compiled
beginWork
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:18728
  18725 | switch (workInProgress.tag) {
  18726 |   case IndeterminateComponent:
  18727 |     {
> 18728 |       return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes);
        | ^  18729 |     }
  18730 |   case LazyComponent:
  18731 |     {
View compiled
HTMLUnknownElement.callCallback
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3733
  3730 | function callCallback() {
  3731 |   didCall = true;
  3732 |   restoreAfterDispatch();
> 3733 |   func.apply(context, funcArgs);
       | ^  3734 |   didError = false;
  3735 | } // Create a global error event handler. We use this to capture the value
  3736 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
C:/Users/AntonyPraveenkumarMo/01_antony/Personalspace/fullstack/React MUI/react-mui-demo/node_modules/react-dom/cjs/react-dom.development.js:3777
  3774 | // errors, it will trigger our global error handler.
  3775 | 
  3776 | evt.initEvent(evtType, false, false);
> 3777 | fakeNode.dispatchEvent(evt);
       | ^  3778 | if (windowEventDescriptor) {
  3779 |   Object.defineProperty(window, 'event', windowEventDescriptor);
  3780 | }

这些错误只有在我试图安装包npm i @mui/styles时才会发生。

我的项目是打字稿项目，请帮我解决这个问题。还有一个请求，请解释一下tsconfig和它的用途

Answer 1

这里有几种可能性：

第一种情况是，错误是由发生错误的文件中未导入React库这一事实引起的。要修复此错误，需要确保将React库导入到使用React变量的文件的顶部。

例如，如果在名为App.tsx的文件中使用React，则需要确保在文件顶部显示以下行：

import * as React from 'react';

添加此导入语句后，您应该能够运行您的React项目，而不会遇到此错误。

第二个问题是，tsconfig文件已从"jsx": "react-jsx"自动更改为"jsx": "preserve"，这导致您的代码中的React导入未定义。要解决这个问题，您需要更新tsconfig文件以包含正确的"jsx"值。您可以通过在tsconfig文件中添加以下行来完成此操作：

"jsx"：“react jsx”

更新tsconfig文件后，保存它，然后再次尝试运行您的React项目。这将解决您遇到的错误，并允许您的项目正常运行。

关于tsconfig.json文件本身，您可以在docs 这里中阅读有关它的内容。TLDR是指该文件通常位于TypeScript项目的根目录中，包含各种选项，这些选项指定编译器在编译TypeScript代码时的行为方式。