我正在尝试用react传单测试一些东西。我在地图上显示 2 台不同的机器，当我单击特定的列表按钮（按机器 ID 区分）时，它会将地图的中心移动到该机器的位置坐标。弹出窗口已添加，但仅当我单击地图上的标记时才会显示。我希望弹出窗口在我单击列表按钮时自动显示（目前我必须单击地图上的标记才能弹出）并且它应该像通常的正常行为一样关闭（这是默认设置）。知道我该怎么做吗？

PS：我曾尝试使用 refs，即使这样它也能部分工作。...

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },
      ],         
    };

  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  openPopUp(marker, id) {
    if (marker && marker.leafletElement) {
      marker.leafletElement.openPopup(id);
    }
  }

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    console.log(this.state);
    return (
      <>
        <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"
          />
          {this.state.location.map(({ lat, lng, id }) => {
            return (
              <Marker
                position={[lat, lng]}
                icon={this.Icon}
                ref={this.openPopUp(id)}
              >
                <Popup> {id} </Popup>
              </Marker>
            );
          })}




        </Map>

        {
          <List style={{ width: "20%", float: "left" }}>
            {this.state.location.map(({ id, machine, lat, lng }) => {
              return (
                <ListItem
                  key={id}
                  button
                  onClick={() => {
                    this.clickAction(id, lat, lng);
                  }}
                >
                  Id {id} <br />
                  machine {machine}
                </ListItem>
              );
            })}
          </List>
        }
      </>
    );
  }
}

...