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

Question

我正在开发一个React JS应用程序。 我有三个主要Routes ，分别是/login ， /register和/app 。 在应用程序组件中，我导入了swipe.js脚本，该脚本仅对/app组件是必需的，而对于其余部分则不需要。 但是，当我运行该应用程序时，它会自动在/login和/register上加载脚本，这是第一个问题。 第二个问题是，当我登录或注册，然后我写了一个脚本来重定向到/app组件，并将其成功完成，但作为swipe.js已经加载， events和functions从swipe.js没有按”在/app上工作。 我不知道是什么问题。

Index.js代码

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

App.js-/ app

 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; 

登录和注册组件

 import React, { Component } from 'react' import './assets/css/bootstrap.css' import './scss/auth.scss' import AuthImage from './assets/img/chat-bg.jpg' import Profile from './assets/img/avatars/avatar-male-1.jpg' import { Link, Redirect } from 'react-router-dom'; import {app, Cookies} from '../Shared/Globals' export class register extends Component { constructor(props) { super(props) this.state = { fname:'', lname:'', email:'', pass:'', pass2:'', formValid : false, regFormBtn : 'Join Now', formError : { error : false, data : null }, registered : false } this.handleRegisterForm = this.handleRegisterForm.bind(this) this.registerUser = this.registerUser.bind(this) } handleRegisterForm(event){ this.setState({ [event.target.name]:event.target.value }) if(this.state.fname !== '' && this.state.lname !== '' && this.state.email !== '' && this.state.pass !== '' && this.state.pass2 !== '' ){ this.setState({ formValid : true }) } else{ this.setState({ formValid : false }) } } registerUser(event){ event.preventDefault(); if(this.state.formValid){ this.setState({ regFormBtn : 'Joining ...', formValid : false }) app.auth().createUserWithEmailAndPassword(this.state.email, this.state.pass) .then( res => { console.log(res); new Cookies().createCookie("uid", res.user.uid, '10 minutes'); this.setState({ regFormBtn : 'Success !' }) this.resetForm(); this.setState({ registered : true }) }) .catch( error =>{ console.log(error); this.setState({ formValid : true, regFormBtn : 'Try Again' }) let err = {...this.state} err.formError.error = true this.setState({ err }) switch(error.code){ case 'auth/email-already-in-use': case 'auth/weak-password': case 'auth/network-request-failed': { let err = {...this.state} err.formError.data = error.message this.setState({ err }) break; } default: } }) } else{ console.log("Form is invalid"); } } render() { let e = ''; if(this.state.formError.error){ e = <div className='error'>{this.state.formError.data}</div> } else{ e = '' } if(this.state.registered){ return <Redirect to='/app' /> } return ( <> <div className='container auth-row'> <div className='row'> <div className='col-6'> <div className='auth-img'> <img src={AuthImage} alt='auth' /> </div> </div> <div className='col-6' > <div className='auth'> <div className='auth-head'> Join Our Chat Community Now !</div> <div className='auth-form'> <form className='row' method='POST' onSubmit={this.registerUser}> <div className='col-12'> {e} </div> <div className='rcaInput col-6'> <input type='text' placeholder='First Name' name='fname' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-6'> <input type='text' placeholder='Last Name' name='lname' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='email' placeholder='Email Address' name='email' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='Password' placeholder='Password' name='pass' onChange={this.handleRegisterForm} /> </div> <div className='rcaInput col-12'> <input type='Password' placeholder='Repeat Password' name='pass2' onChange={this.handleRegisterForm} /> </div> <div className='btn-space col-12'> <button className='rcaBtn' type='submit' disabled={!this.state.formValid}> {this.state.regFormBtn} </button> <div className='small-font' style={{paddingTop:'10px'}}> Already have an account ? <Link to={'/login'} > Login Now</Link> </div> </div> </form> </div> </div> </div> </div> </div> </> ) } } export default register 

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;