Question

我试图将一些组件堆叠在我拥有的某个基本地图图层之上，但我发现其他组件似乎总是低于我的地图。

我为地图创建了一个功能无状态组件。

map.js

const divStyle = {
  position: 'absolute',
  zIndex: -1
};

return (
  <ReactMapGL
    style={divStyle}
    width={props.width}
    height={props.height}
    latitude={props.latitude}
    longitude={props.longitude}
    mapStyle={mapStyle}
    zoom={props.zoom}
    preventStyleDiffing={true}
    onViewportChange={(viewport) => {
      updateViewport(viewport);
    }}/>);

然后我在我的组件中有以下部分要堆叠：

const divStyle = {
  position: 'absolute',
  zIndex: 0,
  top: '0px',
  left: '0px',
};

<div>
  {Map({
    latitude: this.props.map.latitude,
    longitude: this.props.map.longitude,
    width: this.props.map.width,
    height: this.props.map.height,
    zoom: this.props.map.zoom,
    updateViewport: this.props.updateMapViewport
  })}
  <Panel style={divStyle}></Panel>
  <div style={divStyle}>Hello world!</div>
</div>

我认为可能是因为我正在呼叫Map()而不是使用<Map/>，这与它有关，但这听起来并不合适。当我检查开发者控制台时，我看到我的map div有positive:relative，而另一个divs没有position。

Answer 1

在此示例中，<Panel>实际上并未采用样式道具。因此，它无法接受position: absolute样式。

如何在React中将组件堆叠在一起？

map.js

1 个答案: