Question

因为我已经看到类似的问题，所以确实尝试不发布此帖子，但是在在线阅读内容后，我无法在react传单库中显示任何内容。

以下代码段显示了我要制作的地图标记和叠加层。

非常感谢，感谢您的帮助。

在网上查找其他问题时，人们指的是将地图容器位置：绝对，并将z-index设置为400+，这与下面的标记对我来说似乎没有什么区别。

地图标记

              <Map
                zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom={this.state.zoom}>

                <TileLayer
                  attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors and Chat location by Iconika from the Noun Project"
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

                {this.state.pins.map(pin => (
                  <Marker
                    onClick={() => this.showPanel(pin)}
                    key={pin._id}
                    position={[pin.latitude, pin.longitude]}
                    icon={pinIcon}>
                  </Marker>
                ))}

              </Map>

重叠标记

  <div ref={ref => this.el = ref}>
            <button onClick={() => this.setState({ isPaneOpen: true })}>Click me to open right pane!</button>


            <SlidingPane
                className='some-custom-class'
                overlayClassName='some-custom-overlay-class'
                isOpen={ this.state.isPaneOpen }
                title='Hey, it is optional pane title.  I can be React component too.'
                subtitle='Optional subtitle.'
                onRequestClose={ () => {
                    // triggered on "<" on left top click or on outside click
                    this.setState({ isPaneOpen: false });
                } }>
                <div className="container-fluid padding">
                </div>
             </SlidingPane>

更新

我现在已将叠加层移到一个函数中，如下所示

function MyOverLay(props) {
  return <SlidingPane
      className='some-custom-class'
      overlayClassName='some-custom-overlay-class'
      isOpen={ props.isPaneOpen }
      title='Book here
  </SlidingPane>
}

标记更改如下所示

新标记

<div>

        <MyOverLay isPaneOpen={this.state.isPaneOpen} />

          <div className="container-fluid padding">

            <div className="row padding">

              <div className="col-lg-8">

                <Map zoomControl={false}
                doubleClickZoom= {false}
                closePopupOnClick= {false} 
                dragging= {false}
                zoomSnap= {false} 
                zoomDelta= {false} 
                trackResize= {false}
                scrollWheelZoom= {false}
                touchZoom={false}
                className="map"
                worldCopyJump={true}
                center={position}
                zoom="13">
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                <Marker
                    position={[10, -10]}
                    icon={messageIcon}>
                </Marker>
            </Map>

          </div>

Answer 1

我只能想到的解决方案是使用React Portal。这是React的功能，可以在body元素内的“ root”组件之外附加组件。考虑到父级下部的子级子元素比上级下部的子级具有更高的堆叠索引，因此它可以“覆盖”根组件内的任何组件。尝试像这样包装您的组件：

import React from 'react';
import ReactDOM from 'react-dom';

const OverlayComponent = () => {
   return ReactDOM.createPortal(
      <MyComponent />,
      document.body
   );
};

Answer 2

通过控制CSS在地图上呈现的所有面板的z-index值来使其正常工作。 TileLayer上可用的zIndex选项似乎不适用于我，但以下内容解决了该问题。注意到-仅在Chrome中对此进行了测试。

div.map.leaflet-container.leaflet-touch.leaflet-retina.leaflet-fade-anim {
    /*border: 5px solid red;*/
    z-index: 1;
}

div.slide-pane__content {
    /*border: 5px solid black;*/
    z-index: 100;
}

div.ReactModal__Content.ReactModal__Content--after-open.slide-pane.slide-pane_from_right.some-custom-class {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.slide-pane__header {
    /*border: 5px solid orange;*/
    z-index: 100;
}

div.ReactModal__Overlay.ReactModal__Overlay--after-open.slide-pane__overlay.some-custom-overlay-class {
    /*border: 5px solid blue;*/
    z-index: 100;

}

如何在React传单上叠加内容（z索引问题）

2 个答案: