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

IT技术 javascript reactjs leaflet react-leaflet
2021-05-22 06:52:02

我试图在Legend组件悬停时显示工具提示。为此，我有一个Father带有useState钩子的Map组件，以便将数组的索引传递给 Leaflet组件，Location并在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变量发生了变化，但Tooltip没有出现。

有什么建议吗？谢谢！

1个回答

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

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

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

当永久更改的值时，这将强制重新渲染该 Tooltip 组件。

我会考虑不同的方法。如果您不需要在鼠标悬停其来源时也渲染工具提示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，但它只是为了让您知道只有在任一条件为真时才应呈现工具提示。

其它你可能感兴趣的问题
上一篇在 React 中将外部库从基于类的组件移动到功能组件 下一篇当onClick时用参数reactJs setState