React 源代码更改未反映在浏览器 DOM 中

Posted

技术标签:

【中文标题】React 源代码更改未反映在浏览器 DOM 中【英文标题】:React Source code changes not reflecting in browser DOM 【发布时间】:2021-09-08 01:22:17 【问题描述】:

我正在使用 Liferay 的反应,这是一个我只在我们托管我们网站的 linux 服务器上观察到的问题,而不是我的本地 tomcat 服务器。 问题在于,在构建 gradle 项目后,所做的每个文件更改/代码更改都会反映在源脚本中。没有反映的是网络浏览器上的新代码。

这里有一些例子可以更好地描述这个问题:

    如果我将console.log() 添加到网页的构造函数 - 它不会在控制台上打印相同的内容。 如果我将 <p>TITLE</p> 更改为 <p>TITLE-TITLE</p> - 我会在源代码中看到代码更改,但在浏览器网页上看不到。

我能够得出结论,这与 React JS 有关,因为我的所有其他 Java 和 JSP 页面更改都会得到反映。

这是我的 package.json 文件:


   "dependencies":
      "bootstrap":"^4.5.0",
      "bootstrap4-dialog":"^4.3.4",
      "popper.js":"^1.14.1",
      "create-react-ref":"^0.1.0",
      "datatables.net":"^1.10.20",
      "hashmap":"^2.4.0",
      "jquery":"^3.4.1",
      "react":"15.6.2",
      "react-dom":"15.6.2",
      "react-router-dom":"^4.0.0"
   ,
   "devDependencies":
      "babel-cli":"^6.26.0",
      "babel-preset-env":"^1.7.0",
      "babel-preset-react":"6.24.1",
      "liferay-npm-bundler":"latest"
   ,
   "main":"lib/index.es.js",
   "name":"SearchPageController",
   "scripts":
      "build":"babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
   ,
   "version":"1.0.0"

我是 Liferay 的新手,我会做出反应并面临这个问题。任何帮助或支持将不胜感激。

【问题讨论】:

【参考方案1】:

检查是否更改了正确的页面后:

    停止服务器 清除浏览器缓存 nmp install npm run dev

【讨论】:

以上是关于React 源代码更改未反映在浏览器 DOM 中的主要内容,如果未能解决你的问题,请参考以下文章

react native 项目中 app.js 文件中所做的更改未反映

React useRef 设置 DOM 节点的宽度

node_modules 中的代码未反映在浏览器中

对 node_module 的更改未反映 reactjs

.xhtml 文件中的更改未反映在浏览器中,需要重新启动和构建

刀片视图未反映更改