Javascript 反应js中的Arcgis地图不响应

下面是我编写的使用react js加载基本arcgis地图的组件

import React, { Component } from 'react';
import { loadModules } from 'esri-loader';

const options = {
  url: 'https://js.arcgis.com/4.6/'
};

const styles =  {
  container: {
    height: '100vh',
    width: '100vw'
  },
  mapDiv: {
    padding: 0,
    margin: 0,
    height: '100%',
    width: '100%'
  },
}

class BaseMap extends Component {

  constructor(props) {
    super(props);
    this.state = {
      status: 'loading'
    }
  }

  componentDidMount() {
    loadModules(['esri/Map', 'esri/views/MapView'], options)
      .then(([Map, MapView]) => {
        const map = new Map({ basemap: "streets" });
        const view = new MapView({
          container: "viewDiv",
          map,
          zoom: 15,
          center: [78.4867, 17.3850]
        });
        view.then(() => {
          this.setState({
            map,
            view,
            status: 'loaded'
          });
        });
      })

  }

  renderMap() {
    if(this.state.status === 'loading') {
      return <div>loading</div>;
    }
  }

  render() {

    return(
          <div style={styles.container}>
            <div id='viewDiv' style={ styles.mapDiv } >
              {this.renderMap()}
            </div>
          </div>
    )
  }
}

export default BaseMap;

import React，{Component}来自'React'；
从“esri加载程序”导入{loadModules}；
常量选项={
网址：'https://js.arcgis.com/4.6/'
};
常量样式={
容器：{
高度：“100vh”，
宽度：“100vw”
},
mapDiv：{
填充：0，
保证金：0，
高度：“100%”，
宽度：“100%”
},
}
类BaseMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
状态：“正在加载”
}
}
componentDidMount（）{
加载模块（['esri/Map'，'esri/views/MapView']，选项）
。然后（（[Map，MapView]）=>{
const map=新地图（{basemap:“街道”}）；
const view=新地图视图({
容器：“viewDiv”，
地图，
缩放：15，
中间：[78.4867,17.3850]
});
查看。然后（（）=>{
这是我的国家({
地图，
看法
状态：“已加载”
});
});
})
}
renderMap（）{
如果（this.state.status==='loading'）{
回装；
}
}
render（）{
返回(
{this.renderMap（）}
)
}
}
导出默认底图；

地图正在加载。然而，我无法使它响应

---

如果移除视图div周围的div，或者将外部div（周围的viewDiv）的高度和宽度指定为相对（

styles.container:{height:'100%'，width:'100%}

），则贴图不会渲染。不知道为什么。如有任何使其响应的建议，我们将不胜感激。

请您澄清一下“使其响应”是什么意思？您的意思是填充包含此组件的任何DOM元素的高度吗？我怀疑树上的某个元素有一个

位置：绝对

或阻止

高度：100%

工作的东西贴图不会渲染。我怀疑它确实渲染了，只是它的高度为0px，请检查DOM并验证。最后，我强烈建议您启动此代码笔，并在不使用React和esri loader的情况下获得所需的行为：