解决了从React 18降级到React 17时出现的错误的故事

 

继续上一篇文章的内容。

我会参考这个视频。

请给我一个选项,将以下内容用中文进行原生重述:

https://www.youtube.com/watch?v=MzJkWO73S70&list=PLX8Rsrpnn3IVOk48awq_nKW0aFP0MGpnn

开发环境

操作系统:Mac
编辑器:VSCode

由于在开发过程中从React 18降级到React 17,导致了各种错误的发生。

发生错误。

Module not found: Error: Can't resolve 'react-dom/client' in '/User/~~/chatbot-demo/src'

据我搜索得知,似乎是由于降级而导致无法找到模块的路径。

因此,我在根目录下尝试了以下命令。

$ npm install react-dom@17.0.2

在完成安装后,如果运行npm start会遇到相同的错误,所以按照先前的文章继续删除
– package-lock.json
– node_modules
然后尝试运行npm install。

似乎删除package-lock.json和node_modules然后重新运行npm install可以解决这个问题,如果你也遇到类似的困扰,可以试一试这个方法。

然而,又一次出错了。

原因和解决方法 hé

听说 React 18 和 React 17 的 index.js 编写方式存在差异,所以需要修改 src/index.js 的编写,使其与 React 17 相匹配。

import React from 'react';
// import ReactDOM from 'react-dom/client'; ←React18では必要
import {render} from 'react-dom'; //←React17ではこちら
import './assets/styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(document.getElementById('root')); React18で必要
const root = document.getElementById('root'); //←React17ではこちら
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  root
);

在React 18中,被注释的部分是必需的写法。在React 17中,必需的写法被写在它的下面。

成功地解决了降级过程中的错误,没有出现任何问题。

我的感觉

在开发过程中改变版本听起来很可怕,因为可能会出现各种依赖关系的问题。但是能够一一面对并解决出现的错误,作为一个初学者工程师,我觉得我在成长的道路上迈出了一小步。

广告
将在 10 秒后关闭
bannerAds