在 React 中渲染新组件 onclick

Question

I'm new to React and am working on a project. I'm using mapbox-gl and trying to render a popup whenever a hover event occurs. Right now, if i log the coordinates and description to console it works properly, but the popup fails to display at all. Is there something else I need to do to get the popup component to render when the layer is hovered?

 popupClick(e: any) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description
    e.target._canvas.style.cursor = 'default';
      // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }
    
    return (
      <Popup 
        coordinates={coordinates}
      >
          {description}
      </Popup>
    )

  }

<Layer
          id = 'markers'
          style = 'cursor-pointer'
          layout={{
            'icon-image': '{icon}-15',
            'icon-allow-overlap': true
          }}
          onMouseEnter = {this.popupClick}
          onMouseLeave = {this.popupLeave}
          sourceId='places'
  />

Answer 1

You can may be set visibility status of popup when your hover event happens.

 popupClick(e: any) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var description = e.features[0].properties.description
    e.target._canvas.style.cursor = 'default';
      // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

this.setState({showPopUp: true})
    }

and then in your render() you can do something like

    <Layer
              id = 'markers'
              style = 'cursor-pointer'
              layout={{
                'icon-image': '{icon}-15',
                'icon-allow-overlap': true
              }}
              onMouseEnter = {this.popupClick}
              onMouseLeave = {this.popupLeave}
              sourceId='places'
      />
    showPopUp &&  
<Popup coordinates={coordinates} >
              {description}
          </Popup>

so your Popup element will be displayed when showPopUp is true.