如何解决 Typescript 错误 -- mapbox-gl & React hooks

Question

Typescript 新手，需要了解如何解决打字错误。

我正在将 Mapbox 容器设置为 mapDiv.current--它给我这个错误：

Type 'HTMLDivElement | null' is not assignable to type 'string | HTMLElement'.Type 'null' is not assignable to type 'string | HTMLElement'.ts(2322)

虽然这可以通过 mapDiv.current || '' 来解决。这是解决此类问题的正确方法吗？

export const Map: FunctionComponent = () => {
    const mapDiv = useRef<HTMLDivElement>(null);
    let [map, setMap] = useState(null);

    useEffect(() => {
        const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
            const map = new mapboxgl.Map({
                container: mapDiv.current, // ERROR
                container: mapDiv.current || '', // NO ERROR
                style: 'mapbox://styles/mapbox/outdoors-v11',
                center: [-121.91390991210938, 40.316184625814095],
                zoom: 10,
            })
            setMap(map);
        }

        !map && attachMap(setMap, mapDiv)

    }, [map])

    return (
        <div className="Map" ref={mapDiv} />
    )

}

Answer 1

而不是提供后备字符串值（这可能不是最优雅的解决方案，因为它正在寻找 RefObject），您可能想要执行 null/undefined 在 useEffect 挂钩中安装 mapbox 之前进行检查。

useEffect(() => {
  const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
    if (!mapDiv.current) {
      return;
    }
    const map = new mapboxgl.Map({
      container: mapDiv.current, // ERROR
      container: mapDiv.current || '', // NO ERROR
      style: 'mapbox://styles/mapbox/outdoors-v11',
      center: [-121.91390991210938, 40.316184625814095],
      zoom: 10,
    })
    setMap(map);
  }

  !map && attachMap(setMap, mapDiv)

}, [map]);

如何解决 Typescript 错误 -- mapbox-gl & React hooks

How to resolve Typescript error -- mapbox-gl & React hooks

mapbox

typescript

reactjs

mapbox-gl-js