Javascript 将路由器dom v.4 BrowseRouter传递函数反应到子级
我刚刚升级到React路由器v.4(和redux传奇)。但我在路由中将函数从父容器传递到子容器时遇到问题 家长:Javascript 将路由器dom v.4 BrowseRouter传递函数反应到子级,javascript,reactjs,react-router,redux-saga,react-router-v4,Javascript,Reactjs,React Router,Redux Saga,React Router V4,我刚刚升级到React路由器v.4(和redux传奇)。但我在路由中将函数从父容器传递到子容器时遇到问题 家长: import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { BrowserRouter as Router, Route, NavLink } from 'react-route
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import { fetchGalleryImages } from './business_logic/modules/gallery'
import logo from './assets/images/saga-logo.png';
import Gallery from './components/Gallery';
function mapStateToProps(state) {
return { galleryImages: state.galleryImages };
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators({ fetchGalleryImages }, dispatch) };
}
class App extends Component {
constructor(props) {
super(props);
this.loadGallery = props.actions.fetchGalleryImages.bind(this);
}
loadGalleryHandler() {
this.loadGallery();
}
render() {
return (
<div className="App">
<img src={logo} className="logo" alt="logo" />
<h1>Welcome to Redux-Saga</h1>
<section className="content">
<p>This is an exersize in using react together with Redux-saga.</p>
<Router>
<div>
<nav className="main">
<NavLink activeClassName="selected" exact to="/" >Home</NavLink>
<NavLink activeClassName="selected" to="/gallery">Gallery</NavLink>
</nav>
<Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />
</div>
</Router>
</section>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
显然,onLoadEvent=loadGalleryHandler()
没有传递给Gallery
如何使其工作?正如您所注意到的,传递给
的道具不会传递给您的组件。这是路线道具的确切用例
而不是这个,
<Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />
您可以这样做,然后将任何道具传递给您想要的组件
<Route path="/gallery" render={() => (
<Gallery {...props} onLoadEvent={this.loadGalleryHandler} />
)} />
(
)} />
<Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />
<Route path="/gallery" render={() => (
<Gallery {...props} onLoadEvent={this.loadGalleryHandler} />
)} />