[英]React-router-dom v.4 BrowseRouter pass function to child
I have just upgraded to React-Router v.4 (and redux-saga). 我刚刚升级到React-Router v.4(和redux-saga)。 But I am having problems with passing functions from parent container to child inside a route... 但是我在路由中将功能从父容器传递给子容器时遇到问题...
Parent: 家长:
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);
My child component looks like this: 我的子组件如下所示:
import React, { Component } from 'react';
class Gallery extends Component {
componentDidMount() {
this.props.onLoadEvent();
}
render() {
return (
<div className="Gallery">
<h2>Gallery</h2>
</div>
);
}
}
export default Gallery;
As you can see I am trying to pass the function loadGallery
to the Gallery
component, however, in the dom the Gallery
component gets wrapped in a Route
component which does not send the loadGallery
function on to its child. 如您所见,我试图将loadGallery
函数loadGallery
给Gallery
组件,但是,在dom中, Gallery
组件被包装在Route
组件中,该组件不会将loadGallery
函数发送给它的子组件。
This is what it looks like in React's dom: 这就是React dom中的样子:
<Route path="/gallery" onLoadEvent=loadGalleryHandler() component=Gallery()>
<Gallery match={...somestuff...} location={...somestuff...} history={...somestuff...}>...</Gallery>
</Route>
Clearly the onLoadEvent=loadGalleryHandler()
is not passed to Gallery. 显然, onLoadEvent=loadGalleryHandler()
不会传递给Gallery。
How do I make it work? 我该如何运作?
As you noticed, that props you pass to <Route>
won't be passed down to your component. 如您所知,传递给<Route>
道具不会传递给组件。 This is the exact use case for a Route's render
prop. 这是路线的render
道具的确切用例。
Instead of this, 代替这个
<Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />
You can do this and then pass any props to your component that you'd like, 您可以执行此操作,然后将任何道具传递到所需的组件,
<Route path="/gallery" render={() => (
<Gallery {...props} onLoadEvent={this.loadGalleryHandler} />
)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.