如何从另一个组件以编程方式触发标记组件事件

Question

使用 React Leaflet，我试图从同级组件触发 Marker 组件的 "click" 事件。在常规传单中，这是使用以下内容完成的：

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

在 "Results" 组件中，我有一个结果列表，当单击该列表时，我想在地图上触发 Marker 组件的事件。

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

如何从另一个组件以编程方式触发标记组件事件

How to fire Marker component events programatically from another component

javascript

reactjs

react-leaflet