Как запускать события компонента Marker программно из другого компонента

Question

Используя React Leaflet, я пытаюсь запустить событие click для компонента Marker из компонента-брата.В обычном буклете это делается с помощью чего-то вроде следующего:

L.marker(lng,lat).fire('click');
L.marker(lng,lat).openPopup();  

В компоненте «Результаты» у меня есть список результатов, при нажатии которого я хотел бы вызвать события компонента «Маркер» на карте.,

render() { 
<Results tileClicked2={this.tileClicked3.bind(this)} items={this.state.items}></Results>
<Map ref={m => { this.leafletMap = m; }}>
          <TileLayer .../>
             {this.state.items.map((value, index) => {
                return (<Marker>...</Marker>)
             }

В моей функции "tileClicked3" я могу войти this.leafletMap

tileClicked3(index){    
    console.log(index);
    console.log(this.leafletMap)
    //I want to do:
    // marker.fire();
    // marker.openPopup(); 
  }

Вот журнал консоли при нажатии:

Я думаю, я должен быть близко, но, возможно, нет.

Буду признателен за любой совет ...

Answer 1

Это можно сделать, поддерживая индекс предмета, по которому щелкнули, и получив маркер по этому индексу и отобразив его.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer, Marker } from "react-leaflet";
import "./styles.css";

const listData = [
  {
    id: 1,
    text: "Location A",
    lng: 24.960937499999996,
    lat: 38.54816542304656
  },
  {
    id: 2,
    text: "Location B",
    lng: -103.71093749999999,
    lat: 40.97989806962013
  },
  {
    id: 3,
    text: "Location C",
    lng: 76.9921875,
    lat: 24.84656534821976
  }
];

const List = ({ onListItemClick }) => (
  <div>
    <ul>
      {listData.map((aLocation, index) => (
        <li
          key={aLocation.id}
          onClick={e => {
            onListItemClick(index);
          }}
        >
          {aLocation.text}
        </li>
      ))}
    </ul>
  </div>
);

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 1,
    markerIndex: 0
  };

  handleItemClick = index => {
    console.log("show Marker for", listData[index]);
    this.setState({
      markerIndex: index
    });
  };

  render() {
    const markerItem = listData[this.state.markerIndex];
    const MarkerToShow = <Marker position={[markerItem.lat, markerItem.lng]} />;
    return (
      <div>
        <List onListItemClick={this.handleItemClick} />
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {MarkerToShow}
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Рабочий код можно найти здесь: https://codesandbox.io/s/mm6nmw9z29