Fatal编程技术网
  • javascript/
  • Javascript 我自己的外部js代码在react路由器中工作一次

Javascript 我自己的外部js代码在react路由器中工作一次

javascript reactjs

Javascript 我自己的外部js代码在react路由器中工作一次,javascript,reactjs,react-router,Javascript,Reactjs,React Router,请帮帮我 我的项目有4页，其中一页是关于。 我使用react路由器更改此页面之间的路径和内容及其链接 import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import './App.css'; import "./js/script"; import Home from "./components/Home"; import Abou

请帮帮我

我的项目有4页，其中一页是关于。 我使用react路由器更改此页面之间的路径和内容及其链接

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './App.css';
import "./js/script";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Portfolio from "./components/Portfolio";

export default class App extends React.Component {
  render() {
    return(
      <Router>
        <div id="main-container-ma2web">
          <nav id="main-menu-ma2web">
            <ul>
              <li>
                <Link to='/' className="menu-link-ma2web">Home</Link>
              </li>
              <li>
                <Link to='/portfolio' className="menu-link-ma2web">Portfolio</Link>
              </li>
              <li>
                <Link to='/about' className="menu-link-ma2web">About</Link>
              </li>
              <li>
                <Link to='/contact' className="menu-link-ma2web">Contact</Link>
              </li>
            </ul>
          </nav>

          <Switch>
            <Route path='/about'>
              <About />
            </Route>
            <Route path='/contact'>
              <Contact />
            </Route>
            <Route path='/portfolio'>
              <Portfolio />
            </Route>
            <Route path='/'>
              <Home />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}
script.js

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);
};

window.onload = 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);
    }
  }
};


var TxtRotate=函数（el、旋转、周期）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=''+this.txt+''；
var=这个；
var delta=300-Math.random（）*100；
如果（this.isDeleting）{delta/=2；}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==''）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
window.onload=函数（）{
var elements=document.getElementsByClassName（'txt-rotate'）；

对于（var i=0；i我认为您应该尝试在“index.js”文件中导入外部js文件。
尝试使用
浏览器路由器
而不是
路由器


您可以使用
import{BrowserRouter as Router，Switch，Route}重命名导入从'react router'
发生这种情况的原因是
react router
加载
index.html
一次。此后的任何重定向只会重新绘制DOM，而不会在
脚本
标记中重新运行任何代码。重新运行
脚本
标记的唯一方法是重新加载页面（您已经找到）

一个建议是在组件装载时附加脚本标记。别忘了自己清理


export default class About extends React.Component {

  componentDidMount() {
    document.title = 'About MA2WEB - Full-Stack Web Developer';

    const script = document.createElement('script');
    script.id = "myScript";
    script.text = "alert('hello')";
    document.body.appendChild(script);
  }

  componentWillUnmount() {
    const script = document.getElementById("myScript");
    script.parentNode.removeChild(script);
  }

  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">I have experience in
            <span className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'>
            </span>
          </h1>
          <p>
            I can develop both client and server side languages.
          </p>
        </article>
      </section>
    );

  }
}



导出关于扩展React.Component的默认类{
componentDidMount（）{
document.title='About MA2WEB-Full Stack Web Developer'；
const script=document.createElement（'script'）；
script.id=“myScript”；
script.text=“警报（'hello'）”；
document.body.appendChild（脚本）；
}
组件将卸载（）{
常量脚本=document.getElementById（“myScript”）；
script.parentNode.removeChild（脚本）；
}
render（）{
返回(
我在这方面有经验

我可以开发客户端和服务器端语言。


);
}
}



我使用
alert（'hello'）
附加了一个示例。我建议您获取
alert（'hello'）
弹出窗口，根据需要先显示，，然后从那里进行调试。每个人的设置都不同，因此此解决方案可能需要稍微调整。但是，原则应该是相同的。
您正在window.onload上运行脚本，它只运行一次（第一页加载）

要避免这种行为，您应该在componentDidMount上手动调用该函数


  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window){
        rotateText();
    }
  }


方法1

在script.js中，可以将main函数分配给窗口对象，如下所示


window.RotateText = 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);
    }
  }
};


完整的代码

script.js


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);
};

window.RotateText = 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);
    }
  }
};

window.onload = window.RotateText;



import React from "react";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window && window.RotateText){
        window.RotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}



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);
};

export default 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);
    }
  }
}



import React from "react";
import rotateText from "../js/script";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window){
        rotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}


调用componentDidMount中的函数


  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window){
        rotateText();
    }
  }


完整代码

script.js


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);
};

window.RotateText = 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);
    }
  }
};

window.onload = window.RotateText;



import React from "react";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window && window.RotateText){
        window.RotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}



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);
};

export default 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);
    }
  }
}



import React from "react";
import rotateText from "../js/script";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window){
        rotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}



var TxtRotate=函数（el、旋转、周期）{
this.toRotate=toRotate；
this.el=el；
this.loopNum=0；
this.period=parseInt（period，10）| 2000；
this.txt=“”；
这个。勾选（）；
this.isDeleting=false；
};
TxtRotate.prototype.tick=函数（）{
var i=this.loopNum%this.toRotate.length；
var fullTxt=this.toRotate[i]；
如果（这是删除）{
this.txt=fullTxt.substring（0，this.txt.length-1）；
}否则{
this.txt=fullTxt.substring（0，this.txt.length+1）；
}
this.el.innerHTML=“”+this.txt+“”；
var=这个；
var delta=300-Math.random（）*100；
如果（这是删除）{
delta/=2；
}
如果（！this.isDeleting&&this.txt===fullTxt）{
delta=这个周期；
this.isDeleting=true；
}else if（this.isDeleting&&this.txt==“”）{
this.isDeleting=false；
这个.loopNum++；
δ=500；
}
setTimeout（函数（）{
那。勾选（）；
}，三角洲）；
};
导出默认函数（）{
var elements=document.getElementsByClassName（“txt旋转”）；
对于（var i=0；i

关于.js


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);
};

window.RotateText = 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);
    }
  }
};

window.onload = window.RotateText;



import React from "react";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window && window.RotateText){
        window.RotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}



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);
};

export default 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);
    }
  }
}



import React from "react";
import rotateText from "../js/script";

export default class About extends React.Component {
  componentDidMount() {
    document.title = "About MA2WEB - Full-Stack Web Developer";
    if(window){
        rotateText();
    }
  }
  render() {
    return (
      <section className="main-section about animate">
        <article className="about-contents-ma2web">
          <h1 className="typing-ma2web">
            I have experience in{" "}
            <span
              className="txt-rotate"
              data-period="2000"
              data-rotate='[ "JavaScript", "Reactjs", "Nodejs", "GSAP", "PHP", "MySQL", "Wordpress", "SEO" ]'
            ></span>
          </h1>
          <p>I can develop both client and server side languages.</p>
        </article>
      </section>
    );
  }
}



从“React”导入React；
从“./js/script”导入rotateText；
导出关于扩展React.Component的默认类{
componentDidMount（）{
document.title=“关于MA2WEB-全堆栈Web开发人员”；
如果（窗口）{
rotateText（）；
}
}
render（）{
返回(
我在{“}方面有经验
我可以开发客户端和服务器端语言

);
}
}

关于您面临的错误、控制台日志、使用任何呈现html的节点服务器等的一些信息？“代码不工作”回答起来很含糊。@nithin“代码不工作”是指我的javascript代码（用script.js编写的文本键入函数）不起作用。它只起作用一次-如果我重新加载About页面。当我转到主页并返回About页面时，外部js文件中的函数不起作用添加About.js组件code@KishanJaiswal我added@MA2WEB如何包含script.js以及script.js中的内容。一个可能的原因可能是About组件已卸载当您导航回“关于”部分时，由于您使用的是外部脚本，所以它将被删除