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

使用React传单，我试图从同级组件触发Marker组件的“click”事件。在常规传单中，这是通过以下方式完成的：

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>)
             }

以下是单击时的控制台日志：

我想我一定离得很近，但也许不是

---

任何建议都将不胜感激……

这可以通过保持单击的项目索引处于状态并获取该索引处的标记项目并进行渲染来实现

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);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“反应传单”导入{Map，TileLayer，Marker}；
导入“/styles.css”；
常量列表数据=[
{
id:1，
文字：“地点A”，
液化天然气：24.9609374999996，
纬度：38.54816542304656
},
{
id:2，
文本：“位置B”，
液化天然气：-103.710937499999，
纬度：40.979806962013
},
{
id:3，
文本：“位置C”，
液化天然气：76.9921875，
纬度：24.846534821976
}
];
常量列表=（{onListItemClick}）=>(

{listData.map（（位置，索引）=>(
{
onListItemClick（索引）；
}}
>
{aLocation.text}

))}

);
类应用程序扩展组件{
状态={
中间：[51.505，-0.091]，
缩放：1，
markerIndex:0
};
handleItemClick=索引=>{
log（“show Marker for”，listData[index]）；
这是我的国家({
markerIndex：索引
});
};
render（）{
const markerItem=listData[this.state.markerIndex]；
常数MarkerToShow=；
返回(
{MarkerToShow}
);
}
}
const rootElement=document.getElementById（“根”）；
render（
这可以通过保持单击的项索引处于状态并获取该索引处的标记项并进行渲染来实现

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);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“反应传单”导入{Map，TileLayer，Marker}；
导入“/styles.css”；
常量列表数据=[
{
id:1，
文字：“地点A”，
液化天然气：24.9609374999996，
纬度：38.54816542304656
},
{
id:2，
文本：“位置B”，
液化天然气：-103.710937499999，
纬度：40.979806962013
},
{
id:3，
文本：“位置C”，
液化天然气：76.9921875，
纬度：24.846534821976
}
];
常量列表=（{onListItemClick}）=>(

{listData.map（（位置，索引）=>(
{
onListItemClick（索引）；
}}
>
{aLocation.text}

))}

);
类应用程序扩展组件{
状态={
中间：[51.505，-0.091]，
缩放：1，
markerIndex:0
};
handleItemClick=索引=>{
log（“show Marker for”，listData[index]）；
这是我的国家({
markerIndex：索引
});
};
render（）{
const markerItem=listData[this.state.markerIndex]；
常数MarkerToShow=；
返回(
{MarkerToShow}
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
但是如何触发标记的事件，如“Marker.openPopup（）”@MichaelSoriano您可以将
Popup
作为子组件添加到
Marker
。如图所示：我试图做的是，当单击结果项时（列表-而不是映射），我想触发弹出窗口。这是我到目前为止所做的：注意，当你点击一个标记时，弹出窗口会很好地打开。但我希望在点击列表上的项目时有相同的行为。我可以将地图重新居中到标记，但我不知道如何触发弹出窗口open@MichaelSoriano可以将标记引用存储在数组和cal中l
openPopup
在它上面。在这里找到它：但是我如何触发标记的事件，比如“Marker.openPopup（）”@MichaelSoriano您可以将
Popup
作为子组件添加到
Marker
。如下所示：我试图做的是，当结果项被单击时（列表-而不是地图），我想触发弹出窗口。这是我到目前为止所做的：注意，当你点击一个标记时，弹出窗口会很好地打开。但我希望在点击列表上的项目时有相同的行为。我可以将地图重新居中到标记，但我不知道如何触发弹出窗口open@MichaelSoriano可以将标记引用存储在数组和cal中l
openPopup
。在这里找到它：