如何在react组件中使用javascript

Question

我正在开发一个 React 组件，我发现了一个特定的 javascript 代码可以修改我的 html 页面的内容。\n问题是我不知道如何将此脚本合并到我的组件中。我知道我可以用“import”语句调用它，但该脚本使用“window.onload”函数，该函数仅被调用一次，但我的组件被安装了多次，脚本将不再工作

\n\n

组件 -

\n\n

import React, { Component } from \'react\';\nimport textRotation from \'../../scripts/textRotation\';\nimport \'./Main.scss\';\n\n\nclass Main extends Component {\n  constructor(props) {\n    super(props);\n    this.title = props.title;\n    this.imgSrc = props.imgSrc;\n  }\n\n  render() {\n    return (\n      <div className="Main">\n        <div className="main-content">\n          <div className="presentation-caption">\n            <span>Hello, I\'m Jordan, a junior front-end developer, who does a lot of things.</span>\n          </div>\n          <div className="description-caption">\n            <span>Prepare you to encounter various types of projects... but it\'s ok, just explore&nbsp;!</span>\n          </div>\n          <div className="button-container">\n            <a href="#works"><button>Scroll down</button></a>\n          </div>\n        </div>\n        <div className="side-content">\n          <span\n            className="txt-rotate"\n            data-period="1100"\n            data-rotate=\'[ "Web development", "Video editing", "Motion design", "Graphism", "Creativity" ]\'></span><span>.</span>\n        </div>\n        <div className="side-text-portfolio">\n          <span>\xe3\x83\x9d<br />\xe3\x83\xbc<br />\xe3\x83\x88<br />\xe3\x83\x95<br />\xe3\x82\xa9<br />\xe3\x83\xaa<br />\xe3\x82\xaa</span>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Main;\n

\n\n

剧本 -

\n\n

var TxtRotate = function (el, toRotate, period) {\n  this.toRotate = toRotate;\n  this.el = el;\n  this.loopNum = 0;\n  this.period = parseInt(period, 10) || 2000;\n  this.txt = \'\';\n  this.tick();\n  this.isDeleting = false;\n};\n\nTxtRotate.prototype.tick = function () {\n  var i = this.loopNum % this.toRotate.length;\n  var fullTxt = this.toRotate[i];\n\n  if (this.isDeleting) {\n    this.txt = fullTxt.substring(0, this.txt.length - 1);\n  } else {\n    this.txt = fullTxt.substring(0, this.txt.length + 1);\n  }\n\n  this.el.innerHTML = \'<span class="wrap">\' + this.txt + \'</span>\';\n\n  var that = this;\n  var delta = 300 - Math.random() * 100;\n\n  if (this.isDeleting) { delta /= 2; }\n\n  if (!this.isDeleting && this.txt === fullTxt) {\n    delta = this.period;\n    this.isDeleting = true;\n  } else if (this.isDeleting && this.txt === \'\') {\n    this.isDeleting = false;\n    this.loopNum++;\n    delta = 500;\n  }\n\n  setTimeout(function () {\n    that.tick();\n  }, delta);\n};\n\nwindow.onload = function () {\n  var elements = document.getElementsByClassName(\'txt-rotate\');\n  for (var i = 0; i < elements.length; i++) {\n    var toRotate = elements[i].getAttribute(\'data-rotate\');\n    var period = elements[i].getAttribute(\'data-period\');\n    if (toRotate) {\n      new TxtRotate(elements[i], JSON.parse(toRotate), period);\n    }\n  }\n  // INJECT CSS\n  var css = document.createElement("style");\n  css.type = "text/css";\n  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #725070 }";\n  document.body.appendChild(css);\n};\n

\n\n

如果您有任何解决方案可以将脚本添加到我的组件中，或者正确地重新加载它......提前致谢

\n

Answer 1

将脚本更改为：

var TxtRotate = function (el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function () {
    that.tick();
  }, delta);
};

loadCall = function () {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #725070 }";
  document.body.appendChild(css);
};

const loadMyScript = () => window.addEventListener('load', () => loadCall());

export default loadMyScript;

然后从组件内的函数导入loadMyScript并调用。loadMyScript()componentDidMount()