如何将一些预制JavaScript添加到React应用程序中

我希望向使用React创建的页面添加一个更新时钟。原始代码笔演示。我不确定如何集成驱动时钟的JavaScript。我使用的是功能组件。我应该把JavaScript代码放在哪里

我现有的应用程序（在

.clockDiv

中添加了时钟HTML）：

从'preact'导入{h，FunctionalComponent}；
从“/company.scss”导入样式；
从“预作用标记”导入标记；
从“@material ui/core/Typography”导入排版；
从'preact/hooks'导入{useffect，useState，useContext}；
从“../../utils/ajax”导入{get}；
从“./Components/SvgMap”导入{SvgMap}；
从“../../store/store”导入{AppContext，CMSContent}；
导出常量公司：功能组件=（）=>{
const{language:lang}=useContext（AppContext）；
常量[pageContent，setpageContent]=使用状态（未定义）；
/* *********************************************************************** */
useffect（（）=>{
const companyTab=‘Company’；
const editCompany='locUSA'；
获取（`/getPageHTML？tab=${companyTab}&company=${editCompany}&lang=${lang}`）。然后（（companyContent）=>{
setpageContent（公司内容[0].html）；
});
}，[lang]）；
/* *********************************************************************** */
返回(
{pageContent！==未定义&&(
一月
1.
0

12 :
00:
00:
000
)}
);
};
出口违约公司；

驱动时钟的JavaScript是：

Number.prototype.pad = function(n) {
  for (let r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  const now = new Date();
  const milli = now.getMilliseconds();
  const sec = now.getSeconds();
  const min = now.getMinutes();
  const hou = now.getHours();
  const mo = now.getMonth();
  const dy = now.getDate();
  const yr = now.getFullYear();
  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  const tags = ["mon", "d", "y", "h", "m", "s", "mi"];
  const corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
  for (let i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];
}

function initClock() {
  updateClock();
  window.setInterval("updateClock()", 1);
}
  

Number.prototype.pad=函数（n）{
for（设r=this.toString（）；r.length

这是我第一次考虑将普通JavaScript小部件集成到React应用程序中。这是一个非常简单的小部件被添加到一个非常简单的页面上，所以它必须是合理的直接操作，但是我不确定从哪里开始

这类事情有办法解决吗

---

PS-Preact与React几乎相同，任何React解决方案都可以工作。

您可以将JS代码保存为一个单独的文件，导出

UpdateLock

函数，或在您的

公司
组件文件中定义它

然后添加另一个
useffect
调用
updatelock
函数，以替换原来的
initClock
函数

大概是这样的：

// Import or define the updateClock function...
import { updateClock } from './utils/clock';

// Within your component...
useEffect(() => {
  updateClock();
  const interval = window.setInterval(updateClock, 1);
  // Clear the interval if/when the component is removed from the DOM
  return () => window.clearInterval(interval);
}, []);

注意：未经测试的代码，可能需要调整

当然，这并不是真正的react方法，但是我没有时间重写函数，使其更具反应性

// Import or define the updateClock function...
import { updateClock } from './utils/clock';

// Within your component...
useEffect(() => {
  updateClock();
  const interval = window.setInterval(updateClock, 1);
  // Clear the interval if/when the component is removed from the DOM
  return () => window.clearInterval(interval);
}, []);