工具提示传单的动态永久属性

Question

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

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 没有出现。

有什么建议吗？谢谢！

Answer 1

permanent 中的更改无济于事的原因是因为基础传单选项是 react-leaflet treated as immutable。因此，即使您的 showLocationPosition 可能会更改（更改 permanent），工具提示已经创建并且不会响应该道具中的更改。

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

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

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

我会考虑另一种方法。如果您不需要 also 在将鼠标悬停在其来源的 Marker 上时呈现工具提示，只需根据 permanent:[=24= 有条件地呈现它]

<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 的任何逻辑，但它只是让您了解工具提示仅应在 [=36= 时呈现]任一条件为真。

工具提示传单的动态永久属性

Dynamic permanent property for Tooltip leaflet

javascript

leaflet

reactjs

react-leaflet

工具提示传单的动态永久 属性

Dynamic permanent property for Tooltip leaflet

javascript

leaflet

reactjs

react-leaflet

工具提示传单的动态永久属性