Reactjs React-获取对包装类组件的引用

我有一个地图组件，其中包含一个子侧边栏组件。我试图做一个相对简单的任务，当点击地图标记时，滚动到侧边栏中位置列表中的位置。但是，由于侧栏需要用router和connect包装，我无法在map组件中设置ref

（ref）=>this.sidebar=ref

export class Map extends React.Component {
  ...

  handleClick() {
    this.sidebar.scrollToPlace(place.id);
  }

  render () {
    return (
      <MapSidebar
        // unable to set ref
      />
    )
  }
}

我知道使用

wrappedComponentRef

可以通过路由器

获取
的内容，但我仍然需要处理
连接

我还尝试在
MapSidebar
实例上创建自定义引用：

<MapSidebar
  getReference={(ref) => {
    this.sidebar = ref;
  }} />

但这导致了组件更新的无限循环（尽管我不知道为什么）

有没有更好的方法来解决这些问题？
我建议您避免引用，只需向下传递滚动值：

export class Map extends React.Component {
  ...

  handleClick() {
    this.setState({scrollToPlaceId: place.id});
  }

  render () {
    return (
      <MapSidebar
        // Add a new property
        scrollToPlace={this.state.scrollToPlaceId}
      />
    )
  }
}

在两个类中存储引用：

// MapSidebar render - add this to the element you want.
<div ref={r => (this.ref = r)}>

您是否研究过npm包
react航路点
？@Andrew您打算如何使用此包来解决我的问题？它的核心用途似乎是在滚动到某个dom元素时执行函数。对不起，我的意思是
react scroll
1.connect of redux？为什么不在存储中设置选定的一个并通过connect传递它呢。2.在redux connect中，
this.refs.xx.getWrappedInstance（）
将返回已包装的，withRouter可能也会返回
export class Map extends React.Component {
  ...

  handleClick() {
    this.setState({scrollToPlaceId: place.id});
  }

  render () {
    return (
      <MapSidebar
        // Add a new property
        scrollToPlace={this.state.scrollToPlaceId}
      />
    )
  }
}

class MapSidebar extends React.Component {
  ...

  componentWillReceiveProps(nextProps) {
    if (nextProps.scrollToPlace !== this.props.scrollToPlace) {
      this.refs[nextProps.scrollToPlace].scrollIntoView({block: 'end', behavior: 'smooth'});
    }
  }
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MapSidebar));

// MapSidebar render - add this to the element you want.
<div ref={r => (this.ref = r)}>

<MapSidebar ref={r => (this.sidebar = r)}>

this.sidebar.ref