Question

我正在研究React JS应用程序。我有三个主要的Routes，分别是/login，/register和/app。在应用程序组件中，我导入了swipe.js脚本，该脚本仅对/app组件有用，而对于其余组件则不需要。但是，当我运行该应用程序时，它也会自动在/login和/register上加载脚本，这是第一个问题。第二个问题是，当我登录或注册时，我编写了一个脚本以重定向到/app组件并成功完成，但是当swipe.js已经加载时，{{1} }和events中的functions在swipe.js上不起作用。我不知道是什么问题。

Index.js代码

/app

App.js-/ app

import React from 'react';
import ReactDOM from 'react-dom';
//Styles
import './Components/assets/css/bootstrap.css'
//Scripts
import 'bootstrap'
//Components
import App from './App';
import Register from './Components/register'
import Login from './Components/login'
//Routing
import { Route, BrowserRouter as Router } from 'react-router-dom';



ReactDOM.render(
    <Router>
        <Route path={'/app'} component={App} />
        <Route path={'/login'} component={Login} />
        <Route path={'/register'} component={Register} />
    </Router>
    , document.getElementById('root'));

登录并注册组件

import React, {Component} from 'react';
//Scripts
import 'bootstrap'
import 'popper.js'
//Custom Scripts
import './Components/assets/js/swipe.min'

// Components
import Navigation from './Components/navigation'
import SideBar from './Components/sidebar'
import Chat from './Components/chat'
import Compose from './Components/compose-modal'


export class App extends Component {
	constructor(props) {
		super(props)
	
		this.state = {
			 
		}
	}

componentDidMount(){
		console.log("App Component Mounted...");
	}
	
	render() {
		return (
			<div className="layout">
				<Navigation />
				<SideBar />
				<Chat />
				<Compose />
			</div>
		)
	}
}

export default App;

Answer 1

在app.js文件中，您可以对其进行一些修改：

let swipe;

export class App extends Component {
  constructor(props) {
    super(props)

    this.state = { swipeLoaded: false };
  }

  componentDidMount() {
    swipe = require('./...swipe.js'); // require your swipe file here
    this.state = { swipeLoaded: true };
  }
}

要防止渲染中出现其他问题（因为CDM中的设置状态会导致重新渲染），请将其添加到render（）中：

if (!this.state.swipeLoaded) return null;

装入组件时不会加载导入的脚本-React JS

1 个答案: