[英]How to pass component callback to children element in react-router?
I would like to wrap my current router by Layout with one MapBox and pass to children MapBox callback function: 我想用一个MapBox通过Layout包装当前的路由器,并传递给子级MapBox回调函数:
<Route path='/posts' component={PostsList} />
<Route path="/posts/:id" component={Post} >
</Route>
Currently to handle callback I repeat MapBox on two components: 当前要处理回调,我在两个组件上重复执行MapBox:
export default class Post extends React.Component {
mapMoved(map) {console.log('map moved', map)}
render() {
const {post, posts} = this.props;
return (
<div>
{post.title}
<MapBox mapMoved={::this.mapMoved} posts={posts} />
</div>
);
}
}
const mapStateToProps = (state) => ({
post: state.post,
posts: state.posts,
});
export default connect(mapStateToProps)(Post);
export default class PostsList extends React.Component {
renderList() {
const {posts} = this.props;
}
mapMoved(map) {console.log('map moved', map)}
render() {
return (
<div>
{::this.renderList()}
<MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
</div>
);
}
}
const mapStateToProps = (state) => ({
posts: state.posts,
});
export default connect(mapStateToProps)(PostsList);
Desired routes wrapped by Layout: Layout包装的所需路线:
<Route component={Layout}>
<Route path='/posts' component={PostsList} />
<Route path="/posts/:id" component={Post} >
</Route>
</Route>
Desired Layout component: 所需的布局组件:
export default class Layout extends React.Component {
mapMoved(map) {}
render() {
return (
<div>
{this.props.children} //I would like to pass mapMoved callback here
<MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
</div>
);
}
}
const mapStateToProps = (state) => ({
posts: state.posts,
});
export default connect(mapStateToProps)(Layout);
I'm using Redux, maybe should I pass somehow callback function trough it? 我正在使用Redux,也许我应该以某种方式传递回调函数?
You can pass props to children like so 你可以像这样把道具传递给孩子们
export default class Layout extends React.Component {
mapMoved(map) {}
render() {
return (
<div>
{React.cloneElement(this.props.children || <div />, {mapMoved: (map) => this.mapMoved(map)})} //I would like to pass mapMoved callback here
<MapBox mapMoved={::this.mapMoved} posts={this.props.posts} />
</div>
);
}
}
const mapStateToProps = (state) => ({
posts: state.posts,
});
export default connect(mapStateToProps)(Layout);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.