如何将组件回调传递给反应路由器中的子元素？

Question

我想用一个 MapBox 通过 Layout 包装我当前的路由器，并传递给子 MapBox 回调函数：

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

目前为了处理回调，我在两个组件上重复了 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);

布局包装的所需路线：

<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

您可以像这样将道具传递给 children

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

如何将组件回调传递给反应路由器中的子元素？

How to pass component callback to children element in react-router?

javascript

reactjs

react-router

react-redux