如何引用已经渲染但用户没有与之交互的组件？答案

【问题标题】：How to reference a component which has been already rendered but the user hasn't interacted with it?如何引用已经渲染但用户没有与之交互的组件？
【发布时间】：2021-11-29 19:51:25
【问题描述】：

我正在学习 React，但在引用现有组件时遇到了困难。

我的目标是同时显示标记和信息窗口，一旦用户点击其中任何一个。这是我正在使用的代码：

export class WhereWeFly extends Component {

    state = {
        showingInfoWindow: false,  // Hides or shows the InfoWindow
        activeMarker: {},          // Shows the active marker upon click
        selectedPlace: {},          // Shows the InfoWindow to the selected place upon a marker
        dependentRef: {}
      };

    onMarkerClick = (props, marker, e) =>
    this.setState({
        selectedPlace: props,
        activeMarker: marker,
        showingInfoWindow: true,
        clicked: true,
        location: marker.name
    });

    onClose = props => {
    if (this.state.showingInfoWindow) {
        this.setState({
        showingInfoWindow: false,
        activeMarker: null,
        clicked: false
        });
    }
    };

    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}
                        t={this.state.dependentRef}
                        name={'Second'}
                        position={                    
                            {
                                lat: -24.42,
                                lng: -47.47
                            }
                        }
                    />
                    <InfoWindow
                        marker={??????????}
                        visible={true}
                    >
                        <div className='wwf-marker'>
                            <h4>
                                {'First'}
                            </h4>
                        </div>
                    </InfoWindow> 
                    <InfoWindow
                        marker={this.state.activeMarker}
                        visible={this.state.showingInfoWindow}
                        onClose={this.onClose}
                    >
                        <div className='wwf-marker'>
                            <h4>
                                {'Second'}
                            </h4>
                        </div>
                    </InfoWindow> 

                </Map>
            </div>
        </>
        );
  }
}

如何在此处引用标记：

marker={??????????}

我应该使用 useRef 和 useState 的组合吗？如果是，如何？谢谢

【问题讨论】：

标签： reactjs google-maps-react

【解决方案1】：

引用应该可以解决问题，这是create and use one的方法

在你的类组件中创建你的 have 并将其分配给 Marker 后，你可以将 ref 作为 prop markerRef 传递给 InfoWindow，然后使用 props.markerRef.current 访问当前的 Marker 组件.

如果Marker 是函数组件，则需要将其更改为FowardRef 函数组件，因为函数不能保存引用。

【讨论】：