반응 라우터의 자식 요소에 구성 요소 콜백을 전달하는 방법은 무엇입니까?

Question

내가 한 MapBox과 레이아웃에 의해 현재의 내 라우터를 포장하고 어린이 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); 

원하는 경로 : 두 가지 구성 요소에 내가 MapBox를 반복 콜백을 처리 할 수 ​​

<Route path='/posts' component={PostsList} /> 
    <Route path="/posts/:id" component={Post} > 
    </Route> 

현재

<Route component={Layout}> 
    <Route path='/posts' component={PostsList} /> 
    <Route path="/posts/:id" component={Post} > 
    </Route> 
</Route> 

원하는 레이아웃 구성 요소 :

레이아웃 래핑

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

Redux를 사용하고 있습니다. 어쨌든 콜백 함수를 전달해야할까요?

Answer 1

당신은`mapMoved (지도) {}`에 바인딩하지 않고 너무

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