如何设置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网站上提到，什么是不可能直接在地理上设置数据提示。有没有办法解决这个问题？如果我将ComposableMap设置为不可聚焦的，会有帮助吗？

Answer 1

不是将"data-tip“添加到ComposableMap，而是将其添加到保存地图和ReactTooltip的外部div中。