reactjs - 如何设置 ComposableMap 不可聚焦？

Question

我正在尝试制作一张地图，当您将光标悬停时会显示该国家/地区的名称。为此，我使用 react-simple-map 和 react-tooltip：

function OnHoverMap() {
  const [content, setContent] = useState("");


    return (
        <div>
          <Map setTooltipContent={setContent} />
          <ReactTooltip>{content}</ReactTooltip>
        </div>
    )
}

const Map = ({ setTooltipContent }) => {
  return (
    <>
      <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
        <ZoomableGroup>
          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map(geo => (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  onMouseEnter={() => {
                    const { NAME } = geo.properties;
                    setTooltipContent(`${NAME}`);
                  }}
                  onMouseLeave={() => {
                    setTooltipContent("");
                  }}
                  style={{
                    default: {
                      fill: "#D6D6DA",
                      outline: "none"
                    },
                    hover: {
                      fill: "#F53",
                      outline: "none"
                    },
                    pressed: {
                      fill: "#E42",
                      outline: "none"
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </>
  );
};

这工作正常，但是在缩放和移动地图时出现问题 - 焦点转移到整个地图（ComposableMap），带有国家名称的面板出现在地图上方，而不是国家上方：

在 react-simple-maps 网站上提到，无法直接在 Geography 上设置数据提示。有没有办法解决这个问题？如果我使 ComposableMap 不可聚焦有帮助吗？

Answer 1

不要将“data-tip”添加到 ComposableMap，而是将其添加到包含 Map 和 ReactTooltip 的外部 div。