如何在React应用程序组件中添加自定义脚本？

Question

我正在尝试将此脚本添加到我的应用中。

我的public/index.html文件包含

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>...</title>
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <script src="../src/scripts/blink.js"></script>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
      integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
      crossorigin="anonymous"
    />
  </body>
</html>

我的react应用程序按预期在我的端口，引导程序和字体很棒的负载上加载得很好。 但是，该特定模块似乎无法正常运行。 我已经包含了Bootstrap网站上列出的所有必要链接。 我不确定自己在做什么错。 当我在客户端中查看源代码时，单击../src/scripts/blink.js只会在一个新选项卡中打开我的登录页面。

这是我的函数版本，仅供参考，

titlebar = val => {
  var msg = "This is side ";
  var speed = 500;
  var pos = val;
  var msg1 = msg + "A";
  var msg2 = msg + "B";
  if (pos == 0) {
    masg = msg1;
    pos = 1;
  } else if (pos == 1) {
    masg = msg2;
    pos = 0;
  }
  document.title = masg;
  timer = window.setTimeout("titlebar(" + pos + ")", speed);
};
titlebar(0);

Answer 1

如果您在做出反应时这样做，那么以更自然的方式重新实现此脚本可能会有所帮助。 例如：

import React from 'react';

export default class Blinker extends React.PureComponent {

    state = {
        message: 'This is side',
        side: 'A'
    };

    componentDidMount() {
        this.timerId = setInterval(() => this.tick(), 500);
    }

    tick = () => {
        let newSide;
        if (this.state.side === 'A') {
            newSide = 'B';
        } else {
            newSide = 'A';
        }
        this.setState({ side: newSide });
    };

    render() {
        return <span>{this.state.message} {this.state.side}</span>;
    }
}

如何在React应用程序组件中添加自定义脚本？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-12-13 21:59:58

如何在React应用程序组件中添加自定义脚本？

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-13 21:59:58

解决方案1
0 已采纳 2018-12-13 21:59:58