如何解决打字稿错误-mapbox-gl和React钩子

Question

Typescript的新手，需要解决一些解决打字错误的方法。

我将Mapbox容器设置为mapDiv.current，这给了我这个错误：

类型'HTMLDivElement | “ null”不可分配给“ string | HTMLElement'.Type'null'不能分配给'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检查]钩。

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]);