我在index.html中有外部JavaScript文件
<!DOCTYPE html>
<html>
<body>
...blah blah
<div id='app'></div>
<script src='bundle.js'></script>
<script src="./assets/js/autocomplete.js"></script>
</body>
</html>
第一次加载页面时,一切正常,但是当我使用React Router 4菜单链接导航时,AutoComplete.js除非我重新加载页面,否则不会加载。
如何使用RR重新加载autocomplete.js?或其他方式。
我相信ontenter被弃用,否则将是
<Route onEnter={load autocomplete.js ??}/>
因此需要使用渲染
app.js
export default class App extends Component {
constructor(props) {
super(props);
}
render(){
return (
<div>
<Header />
<Route exact path='/' component={ Home }/>
<Route path="/login" component={ Login }/>
<Route path="/register" component={ Register }/>
<Route path="/edit-profile" component={ EditProfile } />
<Footer />
</div>
)
}
}
header.js
const Header = ()=>(
<nav className="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button className="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Link to="/" className="navbar-brand">Bar</Link>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link" to="/login">Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/register">Register</Link>
</li>
<li className="nav-item">
<Link to="/edit-profile" className="nav-link">Edit Profile</Link>
</li>
</ul>
<form className="form-inline mt-2 mt-md-0">
<input className="form-control mr-sm-2" type="text"/>
<button className="btn btn-search my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
);
index.js
import App from './components/App';
ReactDOM.render(
<BrowserRouter>
<Provider store={ store }>
<App/>
</Provider>
</BrowserRouter>, document.getElementById('app'));
编辑。我使用的解决方案:
componentdidmount:
const script = document.createElement("script");
script.src = "/assets/js/autocomplete.js";
document.body.appendChild(script);
(从我的评论中获取 ^(
在标题组件内,在componentDidMount
上,您触发了自动完成,而不是让其在脚本加载上执行自身。