Reactjs 如何解决Typescript错误--mapbox gl&；反应钩

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

我正在将Mapbox容器设置为mapDiv.current--它给了我以下错误：

类型“HtmlLevel | 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} />
    )

}

导出常量映射：FunctionComponent=（）=>{ const mapDiv=useRef（null）； let[map，setMap]=useState（null）； useffect（（）=>{ const attachMap=（setMap:React.Dispatch，mapDiv:React.reobject）=>{ 常量映射=新的mapboxgl.map({ 容器：mapDiv.current，//错误 容器：mapDiv.current | |“”，//无错误 风格：'mapbox://styles/mapbox/outdoors-v11', 中心：[-121.91390991210938，40.316184625814095]， 缩放：10， }) setMap（map）； } ！map&&attachMap（setMap，mapDiv） }，[地图]） 返回( ) }

---

在

useffect

钩子中安装映射框之前，您可能需要执行

null

/

未定义的
检查，而不是提供回退字符串值（这可能不是最优雅的解决方案，因为它正在寻找
重新对象）

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

useffect（（）=>{
const attachMap=（setMap:React.Dispatch，mapDiv:React.reobject）=>{
如果（！mapDiv.current）{
返回；
}
常量映射=新的mapboxgl.map({
容器：mapDiv.current，//错误
容器：mapDiv.current | |“”，//无错误
风格：'mapbox://styles/mapbox/outdoors-v11',
中心：[-121.91390991210938，40.316184625814095]，
缩放：10，
})
setMap（map）；
}
！map&&attachMap（setMap，mapDiv）
}，[地图]；
Huh有趣——那么typescript linter将确定是否已检查空值/未定义值，因此不会抛出错误@wentjunYep，这是因为我在
attachMap
方法中添加了
if（！mapDiv.current）
语句。如果
重新对象
为falsy，则会提前返回。因此，通过检查的任何内容都将被定义。这就是为什么没有错误。不管怎样，你试过上面的代码吗？它有用吗？啊，我看这很有趣。是的！很好用，谢谢你的帮助，非常感谢。