Блог

Я нахожусь на пути к изучению React, но не могу ссылаться на существующие компоненты.

Моя цель — показать оба маркера и InfoWindow одновременно, как только пользователь нажмет на любой из них. Вот код, который я использую:

 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? Если да, то как? Спасибо

Ссылки должны сделать свое дело, вот как их создать и использовать

После того как вы создали свой компонент have в своем классе и назначили его Marker , вы можете просто передать ссылку в InfoWindow качестве реквизита markerRef и получить доступ к текущему Marker компоненту с props.markerRef.current помощью .

Если Marker это функциональный компонент, вам нужно будет изменить его на FowardRef функциональный компонент, поскольку функции не могут содержать ссылки.