将 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();