Question

我经历了很多回答，但仍然无法做到

当公共文件夹中包含js时，此方法可以很好地工作，但是当路由更改时，此方法不起作用

<script src="%PUBLIC_URL%/JS/jQuery-2.1.4.min.js"></script>
<script src="%PUBLIC_URL%/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/JS/app.min.js"></script>

我将此代码包含在头文件中以添加外部js文件，并且可以正常工作，但是每次页面更改脚本都被添加。我在loadScript函数中缺少某些内容。

export default class Header extends Component {
    componentDidMount() {
        var loadScript = function (src) {
            var tag = document.createElement('script');
            tag.type = "text/javascript";
            tag.async = false;
            tag.src = src;
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(tag);
        }
        loadScript("/JS/jQuery-2.1.4.min.js");
        loadScript("/BOOTSTRAP-JS/bootstrap.min.js");
        loadScript("/JS/app.min.js");
    }

    render() {
        return (
            <header className="main-header">
                <a href="#" className="logo">
                    <span className="logo-mini"><img src={ImageSmall} /></span>
                    <span className="logo-lg">
                        <img src={RelconImage} style={{ width: '170px', height: 60 }} />
                    </span>
                </a>
                <nav className="navbar navbar-static-top" role="navigation">
                    <img src={menuIcon} className="sidebar-toggle" data-toggle="offcanvas" role="button" style={{ width: '55px' }} />
                    <label style={{ color: 'white', paddingTop: '18px' }} />
                    <div className="navbar-custom-menu">
                        <ul className="nav navbar-nav">
                            <li className="dropdown user user-menu">
                                <a href="#" className="dropdown-toggle" data-toggle="dropdown"> <img src={userIcon} className="user-image" alt="User Image" />
                                    <span className="hidden-xs" />
                                </a>
                                <ul className="dropdown-menu">
                                    <li className="user-header"><img src={userIcon} className="img-circle" alt="User Image" />
                                        <p>Relcon</p></li>
                                    <li className="user-footer">
                                        <div className="pull-right">
                                            <a className="btn btn-info">SIGN OUT</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#" data-toggle="control-sidebar"><img src={VendorLogo} style={{ width: '200px', height: '50px', marginTop: '-10px' }} /></a></li>
                        </ul>
                    </div>
                </nav>
            </header>
        );
    }
}

要停止追加，我使用了以下代码，但是当菜单更改时，这不起作用

componentDidMount() {
    var loadScript = function (src, file_id) {
        var scriptexist = document.getElementById(file_id);
        if (!scriptexist) {
            var tag = document.createElement('script');
            tag.type = "text/javascript";
            tag.async = false;
            tag.src = src;
            tag.id = file_id;
            var body = document.getElementsByTagName('body')[0];
            body.appendChild(tag);
        }
    }
    loadScript("/JS/jQuery-2.1.4.min.js", 'jqjs');
    loadScript("/BOOTSTRAP-JS/bootstrap.min.js", 'bootsjs');
    loadScript("/JS/app.min.js", 'appjs');
}

这是每次页面更改时它如何附加到正文的方式

<script type="text/javascript" src="/JS/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script type="text/javascript" src="/JS/app.min.js"></script>
<script type="text/javascript" src="/JS/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="/BOOTSTRAP-JS/bootstrap.min.js"></script>
<script type="text/javascript" src="/JS/app.min.js"></script>

这些是我的其他子页面，而ComponentWillMountFunction在“标题”页面中。

class dashboard extends Component {
    render() {
        return (
            <div>
                <Header />
                <Sidebar />
                <div className="content-wrapper">
                    <section className="content-header" />
                    <section className="content">
                        {/* Page Content Here */}
                    </section>
                </div>
                <Footer />
            </div>
        );
    }
}
export { dashboard }

class transactions extends React.Component {
    render() {
        return (
            <div>
                <Header />
                <Sidebar />
                <div className="content-wrapper">
                    <section className="content-header" />
                    <section className="content">
                      This are transactions
                    </section>
                </div>
                <Footer />
            </div>
        );
    }
}
export { transactions }

这是我的App文件

import React from 'react';
import { history } from '../helpers';
import { login } from '../login';
import { dashboard } from '../dashboard';
import { transactions, inventorys } from '../reports';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route exact path="/" component={login} />
          <Route path="/dashboard" component={dashboard} />
          <Route path="/transaction" component={transactions} />
          <Route path="/inventory" component={inventorys} />
          <Redirect from="*" to="/" />
        </Switch>
      </Router>
    );
  }
}

export { App };

Answer 1

脚本将在浏览器中运行。因此，您必须使用绝对路径。并且路径必须在您的服务器中提供。

通常，为了进行表达，通常有一个中间件供您选择应提供静态文件的位置。 https://expressjs.com/en/starter/static-files.html

检查您的代码，也许有

app.use(express.static('public'))

现在就您的情况而言，如果您要提供src/component/ui中的脚本文件。您可以这样修改代码：

app.use(express.static('src/component/ui'))

现在您的脚本将如下所示：

<script src="/JS/jQuery-2.1.4.min.js" type="text/babel"></script>
<script src="/BOOTSTRAP-JS/bootstrap.min.js" type="text/babel"></script>
<script src="/JS/app.min.js" type="text/babel"></script>

将外部JS文件添加到React JS项目

1 个答案: