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钩中安装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]);

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

1 个答案: