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

Question

Typescript新手，需要澄清如何解决键入错误。

我正在将Mapbox容器设置为mapDiv.current——它给了我一个错误：

类型"HTMLDivElement|null"不可分配给类型"string|HTMLElement"。类型"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

在useEffect挂钩中安装映射框之前，您可能需要进行null/undefined检查，而不是提供回退字符串值(这可能不是最优雅的解决方案，因为它正在寻找RefObject(。

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