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

Question

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

我现有的应用程序（在 .clockDiv 中添加了时钟.clockDiv ） ：

import { h, FunctionalComponent } from 'preact';
import style from './company.scss';
import Markup from 'preact-markup';
import Typography from '@material-ui/core/Typography';
import { useEffect, useState, useContext } from 'preact/hooks';
import { get } from '../../utils/ajax';
import { SvgMap } from './Components/SvgMap';
import { AppContext, CMSContent } from '../../store/store';

export const Company: FunctionalComponent = () => {
  const { language: lang } = useContext(AppContext);
  const [pageContent, setpageContent] = useState<string | undefined>(undefined);

  /* *********************************************************************** */
  useEffect(() => {
    const companyTab = 'Company';
    const editCompany = 'locUSA';
    get<CMSContent[]>(`/getPageHTML?tab=${companyTab}&company=${editCompany}&lang=${lang}`).then((companyContent) => {
      setpageContent(companyContent[0].html);
    });
  }, [lang]);
  /* *********************************************************************** */

  return (
    <div class={style.companyDiv}>
      <div class={style.pageData}>
        {pageContent !== undefined && (
          <Typography>
            <div class={style.topStuff}>
              <div class={style.pageContent}>
                <Markup markup={pageContent} trim={false} type='html' />
              </div>
              <div class={style.clockDiv}>
                <div class={style.timedate}>
                  <a id="mon">January</a>
                  <a id="d">1</a>,
                  <a id="y">0</a><br />
                  <a id="h">12</a> :
                  <a id="m">00</a>:
                  <a id="s">00</a>:
                  <a id="mi">000</a>
                </div>
              </div>
            </div>
          </Typography>
        )}
      </div>
    </div>
  );
};
export default Company;

驱动时钟的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);
}
  

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

这种事情有HowTo吗？

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

Answer 1

您可以将 JS 代码保存为导出updateClock的单独文件，或在您的Company组件文件中定义它。

然后再添加一个useEffect调用updateClock function，替换原来的initClock function。

像这样的东西：

// 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);
}, []);

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

当然，这并不是真正的反应方式，但我没有时间重写 function 以使其更具反应性。