在 React 中渲染新組件 onclick

Question

我是 React 新手，正在做一個項目。 我正在使用 mapbox-gl 並嘗試在發生 hover 事件時呈現彈出窗口。 現在，如果我將坐標和描述記錄到控制台，它可以正常工作，但彈出窗口根本無法顯示。 當圖層懸停時，我還需要做些什么來渲染彈出組件嗎？

 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

當您的 hover 事件發生時，您可以設置彈出窗口的可見性狀態。

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

然后在你的render()你可以做類似的事情

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

因此當 showPopUp 為 true 時，將顯示您的 Popup 元素。