时间戳

首页 > 解决方案 > Tooltip 传单的动态永久属性

javascript - Tooltip 传单的动态永久属性

问题描述

我试图在Legend组件悬停时显示工具提示。为此，我有一个Father带有钩子的组件，以便将数组的索引useState传递给 Leaflet组件，并在这些索引相等时更改属性。MapLocationPermanent

const permanent = i === showLocationPosition;

这showLocationPosition是悬停位置的索引，通过道具获取其Father组件。

<Marker
  position={[position[0], position[1]]}
  key={index}
  icon={divIcon({ className: 'marker-dot dot-hover', html: ReactDOMServer.renderToString(stringHTML), iconSize: [30, 30] })}
>
  <Tooltip direction="bottom" opacity={1} offset={new Point(xPoint, 10)} permanent={permanent}>
    <div className={`popup-container-header ${item.count ? 'w-80' : 'w-40 text-center'}`}>
      <p className="w-full">
        {type_of_country_operation ?? item.name}
      </p>
      {item.count && <p>{item.count}</p>}
    </div>
    {item.summary && <p className="popup-container-main">{item.summary}</p>}
  </Tooltip>
</Marker>

我可以验证permanent变量是否发生了变化，但Tooltip没有出现。

有什么建议吗？谢谢！

标签： javascriptreactjsleafletreact-leaflet

解决方案

更改permanent没有帮助的原因是因为底层传单选项被react-leaflet视为不可变的。因此，即使您showLocationPosition可能会更改（哪些更改permanent），工具提示已经创建并且不会响应该道具中的更改。

一种快速而肮脏的方法是也使用工具提示上的道具key，它可以是索引和永久状态的组合：

<Tooltip {...otherProps} key={`${index}-${permanent}`}>

当永久值更改时，这将强制重新呈现该工具提示组件。

我会考虑一种不同的方法。如果您不需要在鼠标悬停其来源时也呈现工具提示，只需根据以下条件有条件地呈现它：Markerpermanent

<Marker {...markerprops}>
  {permanent && <Tooltip direction="..." offset={...} permanent={permanent}>
    {stuff}
  </Tooltip>}
</Marker>

您可能希望将名称更改为permanent其他名称，例如currentOpenTooltip. 现在，如果您还希望在用户将鼠标悬停在标记上时正确打开和关闭工具提示，则需要为此添加条件。您可以使用状态变量来跟踪Marker鼠标悬停的内容，并使用事件处理程序来控制该状态变量。

const Father = () => {

  const [currentlyMousedOverMarker, setCurrentlyMousedOverMarker] = useState(-1);

  return (
    <MapContainer>
      {markersData.map((marker, index) => {
        <Marker 
          {...markerprops}
          eventHandlers={{
            mouseenter: () => { setCurrentlyMousedOverMarker(index) },
            mouseleave: () => { setCurrentlyMousedOverMarker(-1) }
          }}
        >
          {permanent || currentlyMousedOverMarker === index && 
            (
              <Tooltip permanent={permanent || currentlyMousedOverMarker}>
                {stuff}
              </Tooltip>
            )
          }
        </Marker>
      })}
    </MapContainer>
  )

}

显然，此代码示例已简化并且不包含您已经拥有的任何逻辑，但这只是为了让您了解只有在任一条件为真permanent时才应呈现工具提示。

推荐阅读