简单的地图反应，在悬停时不显示名称

Question

我试图显示国家名称在悬停使用简单的地图反应与反应工具提示。随着控制台登录鼠标进入，我意识到，在悬停时，我实际上得到了国家的名称和我需要的其余信息。然后我尝试在setTooltipContent上设置它，并在悬停时显示它，但是它不起作用。

我的map.js组件

import React, { useState, useEffect, memo} from "react";
import { ComposableMap, Geographies, Geography, Annotation, ZoomableGroup, Sphere, Graticule, Marker} from "react-simple-maps";

import {scaleLinear} from "d3-scale";

const geoUrl =
  "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";

//darker color for more population
  const colorScale = scaleLinear().domain([0, 6500000]).range(["yellow", "red"])


  const Map = ({ setTooltipContent }) => {
    const [countries, setCountries] = useState([])
    const [continents, setContinents] = useState([])
    const [ position, setPosition ] = useState({coordinates:[0, 0], zoom: 1})

    const handleMoveEnd = (position) => {
        setPosition(position)
    }

    const rounded = num => {
        if (num > 1000000000) {
          return Math.round(num / 100000000) / 10 + "Bn";
        } else if (num > 1000000) {
          return Math.round(num / 100000) / 10 + "M";
        } else {
          return Math.round(num / 100) / 10 + "K";
        }
      };

    const getData = () => {
        fetch('http://localhost:3001/countries', {
            header: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            }
        })

        .then((res) => res.json())
        .then((data) =>{setCountries(data)})
    }

    const getContData = () => {
        fetch('http://localhost:3001/continent', {
            header: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            }
        })

        .then((res) => res.json())
        .then((data) =>{setContinents(data)})
    }

    useEffect(() => {
        getData();
        getContData();
    }, [])
    
return(
    <div className="map">
      
        <div style={{width: '50vw', height: '50vh'}}>
            <ComposableMap
            width={900}
            height={400}
            projectionConfig={{
                rotate: [-10, 0, 0],
                scale:147
            }}>
                {
                    countries.length >0 
                    ?
                    <ZoomableGroup
                        zoom={position.zoom}
                        center={position.coordinates}
                        onMoveEnd={handleMoveEnd}>
                            <Sphere stroke="#000" strokeWidth={0.3}/> 
                             <Graticule stroke="#000" strokeWidth={0.3}/>
                            
                            <Geographies geography={geoUrl}>
                                {
                                    ({geographies}) => 
                                    geographies.map((geo, index )=> {
                                        const isos = countries.find((s) => s.ISO3 === geo.properties.ISO_A3)
                                        
                                        return (
                                            <>
                                            <Geography
                                                key={index}
                                                geography={geo}
                                                fill= {isos ?  colorScale(isos["population_density"]) : 'red'} 
                                                onMouseEnter={() => {
                                                    
                                                    const { NAME, POP_EST } = geo.properties;
                                                    console.log(`${NAME} — ${rounded(POP_EST)}`)
                                                    setTooltipContent(`${NAME} — ${rounded(POP_EST)}`);
                                                  }}
                                                  onMouseLeave={() => {
                                                    setTooltipContent("");
                                                  }}
                                                  style={{
                                                    
                                                    hover: {
                                                      fill: "cyan",
                                                      outline: "none"
                                                    },
                                                    pressed: {
                                                      fill: "cyan",
                                                      outline: "none"
                                                    },
                                                    default: {
                                                        outline: 'none'
                                                    }
                                                    
                                                  }}
                                                  />
                                   
                                       </>
                                                )
                                    })
                                }
                            </Geographies>
                        
                        </ZoomableGroup>
                    :
                    <p>Loading</p>
                }
                </ComposableMap>

        </div>


    </div>
);
}

export default  memo(Map);

我的app.js

import './App.css';
import React, {useState} from 'react';
import Map from './components/Map';
import ReactTooltip from "react-tooltip";

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

  return (
    <div className="App">
     <Map setTooltipContent={setContent}/>
     <ReactTooltip>{content}</ReactTooltip>
    </div>
  );
}

export default App;

Answer 1

这可能有点晚了，但我也遇到了同样的问题，我浪费了时间在错误的文档，反应的文档-简单-映射。我们问题的答案在于React-Tooltip的文档。

问题是工具提示确实出现了，但它出现在某个看不见的地方。在我的例子中，我有一个组件固定到一个小的大小，溢出设置为隐藏，所以它显示为隐藏:)

幸运的是，react工具提示库允许我们将offset道具传递给它。它的工作原理类似于CSS position属性(根据我的理解)。

下面是我的实现，您在这里调用ReactTooltip组件：

import React, {useState} from 'react';
import Map from './components/Map';
import ReactTooltip from "react-tooltip";

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

  return (
    <div className="App">
     <Map setTooltipContent={setContent}/>

     //you can adjust the top and left according to your needs
     <ReactTooltip offset={{ top: 335, left: 45 }} >
        {content}
     </ReactTooltip>

    </div>
  );
}

export default App;

下面是指向react-tooltip文档的链接：

https://www.npmjs.com/package/react-tooltip

希望那是有帮助的！