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

如何解决工具提示传单的动态永久属性

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

Permanent

const permanent = i === showLocationPosition; 是悬停位置的索引，通过其 showLocationPosition 组件的 props 获取。

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

有什么建议吗？谢谢！

解决方法

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

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

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

当永久的值发生变化时，这将强制重新渲染该工具提示组件。

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

<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 逻辑，但它只是为了让您了解工具提示应该仅在 任一情况下呈现 em> 条件为真。