將 React v17 降級為使用 npx 創建的 v18

Question

如何降級使用“npx create-react-app.--template typescript”創建的項目。 我在網上找到的所有帖子都建議手動更改依賴項，然后運行“npm install”，但是當我這樣做時總會出現一些錯誤。 如何修改依賴項以使其與 React v17 一起使用？

這是我降級的嘗試：

"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.1",
"@types/node": "^16.11.36",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"

}

這是錯誤：

npm WARN ERESOLVE 重寫對等依賴

npm WARN 解析時：hard-keys-react17@0.1.0

npm WARN 發現：react@18.1.0

npm 警告節點模塊/反應

npm WARN react@"^17.0.2" 來自根項目

npm 警告 3 個以上（@testing-library/react、react-dom、react-scripts）

npm 警告

npm WARN 無法解析依賴項：

npm WARN peer react@"^18.0.0" from @testing-library/react@13.2.0

npm 警告 node_modules/@testing-library/react

npm WARN @testing-library/react@"^13.2.0" 來自根項目

npm WARN ERESOLVE 重寫對等依賴

npm WARN 解析時：hard-keys-react17@0.1.0

npm WARN 發現：react@18.1.0

npm 警告節點模塊/反應

npm WARN react@"^17.0.2" 來自根項目

npm 警告 3 個以上（@testing-library/react、react-dom、react-scripts）

npm 警告

npm WARN 無法解析依賴項：

npm WARN peer react@"^18.1.0" from react-dom@18.1.0

npm 警告 node_modules/react-dom

npm WARN react-dom@"^17.0.2" 來自根項目

npm 警告 1 個 (@testing-library/react)

npm WARN ERESOLVE 重寫對等依賴

npm WARN 解析時：hard-keys-react17@0.1.0

npm WARN 發現：react-dom@18.1.0

npm 警告 node_modules/react-dom

npm WARN react-dom@"^17.0.2" 來自根項目

npm 警告 1 個 (@testing-library/react)

npm 警告

npm WARN 無法解析依賴項：

npm WARN peer react-dom@"^18.0.0" from @testing-library/react@13.2.0

npm 警告 node_modules/@testing-library/react

npm WARN @testing-library/react@"^13.2.0" 來自根項目

Answer 1

你總是可以跑

npm resolve dependencies

手動降級可能會發出一些警告，告訴您有比您現在使用的版本更新的版本，但它仍然可以正常工作。

你在你的 package.json 中犯了一個錯誤

"react-scripts": "5.0.1",

做了

"react-scripts": "^5.0.1",

Answer 2

要在創建項目后將 React 版本 18 降級到 17，您必須執行以下操作

npm install react@17.0.2 react-dom@17.0.2

並將 src/index.js 替換為此。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
, document.getElementById('root'));
reportWebVitals();