如何在 React 中堆叠组件？

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 样式。