React中如何引用已渲染未交互的组件？以谷歌地图Marker为例

问题核心说明 #

你当前使用的是Class类组件，不能直接使用useRef、useState这类React Hook，Hook仅支持在函数组件中调用。你要实现的点击Marker展示对应InfoWindow的需求，现有代码逻辑稍加调整即可实现，不需要额外冗余代码。

方案1：优化为单InfoWindow动态匹配（最推荐） #

你不需要给每个Marker单独写对应的InfoWindow，仅用1个InfoWindow配合你已定义的状态变量即可实现需求：

render() {
  return (
    <>
      <div className='wherewefly' id='wherewefly'>
        <div className='wwf-title' id='wwf-title'>
          <h1>
            <i class='fas fa-map-marker'></i>
            <span>Where do we fly to?</span>
          </h1>
        </div>
        <Map
          google={this.props.google}
          zoom={zoom}
          style={mapStyles}
          initialCenter={initCenter}>

          <Marker
            onClick={this.onMarkerClick}
            name={'First'}
            position={{
                lat: -23.42,
                lng: -46.47
            }}
          />
          <Marker
            onClick={this.onMarkerClick}
            name={'Second'}
            position={{
                lat: -24.42,
                lng: -47.47
            }}
          />
          {/* 仅保留1个InfoWindow，动态匹配选中的Marker */}
          <InfoWindow
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
            onClose={this.onClose}
          >
            <div className='wwf-marker'>
              <h4>
                {/* 动态读取当前选中Marker的名称 */}
                {this.state.selectedPlace.name}
              </h4>
            </div>
          </InfoWindow> 
        </Map>
      </div>
    </>
  );
}

该方案不需要新增任何ref，你已写好的onMarkerClick状态更新逻辑已经完全可以支撑需求。

方案2：如果必须单独绑定指定Marker的InfoWindow（对应你要填??????????的场景） #

如果业务要求必须给某个Marker单独挂载始终显示的InfoWindow，就用Class组件支持的React.createRef实现：

1. 先在组件内声明Marker的ref

export class WhereWeFly extends Component {
  // 新增对应First Marker的ref
  firstMarkerRef = React.createRef();
  // 原有state不变
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
    dependentRef: {}
  };
  // 其余原有逻辑保持不变

2. 给对应Marker绑定ref

<Marker
  ref={this.firstMarkerRef}
  onClick={this.onMarkerClick}
  name={'First'}
  position={{
    lat: -23.42,
    lng: -46.47
  }}
/>

3. 给InfoWindow传入ref实例

<InfoWindow
  marker={this.firstMarkerRef.current}
  visible={true}
>
  <div className='wwf-marker'>
    <h4>
      {'First'}
    </h4>
  </div>
</InfoWindow> 

函数组件版本补充 #

如果你之后重构为函数组件，才需要用useRef替代createRef，逻辑完全一致：

// 函数组件内部声明ref
const firstMarkerRef = useRef(null);
// 绑定ref、读取ref.current的操作和类组件完全相同

内容的提问来源于stack exchange，提问作者Kaguei Nakueka