如果你使用scss作为css预处理器，那么你可以使用一个循环来定义正确的z-index，以便使所有的东西都显示为一个在另一个之上。
这个循环最多处理5个级别，如果需要，您可以增加数量

@for $i from 1 through 6 {
  $zIndexBackdrop:  #{1000 + (5 * $i)};
  $zIndexContent:  #{1000 + (5 * $i) + 2};
  .modal-backdrop.show:nth-of-type(#{$i}) {
    z-index: $zIndexBackdrop;
  }
  div[role="dialog"][aria-modal="true"]:nth-of-type(#{$i}) {
    z-index: $zIndexContent;
  }
}

这里的循环1 through 6循环了5次，如果你想增加数量，你可以增加情态动词的深度。
我已经使用了react-bootstrap模态所使用的通用类名称，请交叉检查背景和主模态是如何创建的。

我们只是处理了多个模态，每个通道都有一个不同的id，然后将“show”状态设置为：
https://github.com/AgileVentures/agile-ventures-website-react-front-end/blob/4_homepage_changes_mob/src/App.js#L26

class App extends Component {

  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      show: null
    };
  }

  handleClose() {
    this.setState({show: id});
  }

  handleShow(id) {
    this.setState({show: id});
  }

  render() {
    return (
      <div className="App">

        <Grid>
          <Row>
            <Col xsOffset={1} sm={5}>
              <Button bsStyle="primary" bsSize="large" onClick={() => this.handleShow('here')}>
                <h1>You are here!</h1>
              </Button>
              <Modal
                show={this.state.show == 'here'} onHide={this.handleClose}
              >
                <Modal.Header closeButton closeLabel="close window">
                </Modal.Header>
                <Modal.Body>
                  <p className='landing-page-markers you-are-here'>Tired of toy projects, tutorials and online courses?
                      <img src={logo} className="App-logo" alt="logo" />
                  </p>
                </Modal.Body>
              </Modal>
            </Col>
          </Row>
          ... more modals passing in different ids ...

“类型的第n个”解决方案对我不起作用，相反，我用“最后一个第n个孩子”解决了它，就像下面这样。

div[role="dialog"][aria-modal="true"]:nth-last-child(1) {
  z-index: 1125;
}
.modal-backdrop.show:nth-last-child(2){
  z-index: 1100;
}
div[role="dialog"][aria-modal="true"]:nth-last-child(3) {
  z-index: 1075;
}
.modal-backdrop.show:nth-last-child(4){
  z-index: 1050;
}
div[role="dialog"][aria-modal="true"]:nth-last-child(5) {
  z-index: 1025;
}
.modal-backdrop.show:nth-last-child(6){
  z-index: 1000;
}

其思想是，每次显示模态时，一个模态元素和一个阴影元素将被附加到主体（库已经这样做了）。因此，从最后一个子元素开始，第（n + 1）个元素将是模态元素，第（n + 2）个元素将是模态阴影元素。
在这个例子中，我将嵌套的模态设置为在最多3个级别上工作，但是您可以根据需要添加其中两个样式。

如果您使用的是React 16.8+，则可以使用React Hook useState（和功能组件），这样您就可以根据状态指定希望其显示的模态：

export const MyModals = () => {
const [modalState, setModalState] = useState< "modal-one" | "modal-two" | "close" >("close")

const handleShowModalOne = () => {
 setModalState("modal-one")
}

const handleShowModalTwo = () => {
 setModalState("modal-two")
}

const handleClose = () => {
 setModalState("close")
}

return (
 <div>
   <Button onClick={handleShowModalOne}>Show Modal One</Button>

   <Modal show={modalState === "modal-one"}>
     <Modal.Body>This is Modal One</Modal.Body>
     <Modal.Footer>
       <Button onClick={handleShowModalTwo}>Show Modal Two</Button>
     </Modal.Footer>
   </Modal>

   <Modal show={modalState === "modal-two"}>
     <Modal.Body>This is Modal Two</Modal.Body>
     <Modal.Footer>
       <Button onClick={handleClose}>Close</Button>
     </Modal.Footer>
   </Modal>
 </div>
)
}

我用了很多这样的模型

render() {
    return(
       <div>
           <button onClick={() => this.setState({ showModal1:true, showModal2:false});} >open modal one</button>

          <button onClick={() => this.setState({ showModal2:true, showModal1:false});} >open modal two</button>

          <Modal show={this.state.showModal1} onHide={() => this.setState({ showModal1:false});}>
           modal one content..
          </Modal>

          <Modal show={this.state.showModal2} onHide={() => this.setState({ showModal2:false});}>
          modal two content..
       </Modal>

     </div>
   );
}

这取决于你想实现什么。我有多个react bootstrap模态对话框，也有嵌入式对话框，比如模态对话框显示弹出错误消息。通常你可以定义状态变量，如下所示：

this.state = {showModal1:true, showModal2:false,...}

在渲染函数中，您可以执行以下操作：

render() {
    return(
       <div>
           <Modal show={this.state.showModal1}>
              some modal 1 text comes here
           </Modal>
           <Modal show={this.state.showModal2}>
              some modal 2 text comes here
           </Modal>
       </div>
     );
}

在上面的代码中，如果showModal1和showModal2都为true，您将获得两个模式对话框，并且第二个对话框位于第一个对话框之上。

import React, { useState } from "react"

import Button from 'react-bootstrap/Button';
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalFooter from "react-bootstrap/ModalFooter";

const MyModals = () => {
      const [modalState, setModalState] = useState("close");
      
      const handleShowModalOne = () => {
       setModalState("modal-one")
      }
      
      const handleShowModalTwo = () => {
       setModalState("modal-two")
      }
      
      const handleClose = () => {
       setModalState("close")
      }
      
      return (
       <>
       <Modal show={modalState === "modal-one"}>
           <ModalBody>This is Modal One</ModalBody>
           <ModalFooter>
             <Button variant="primary" onClick={handleClose}>Close</Button>
             <Button>Save Changes</Button>
           </ModalFooter>
         </Modal>
      
         <Modal show={modalState === "modal-two"}>
           <ModalBody>This is Modal Two</ModalBody>
           <ModalFooter>
             <Button variant="primary" onClick={handleClose}>Close</Button>
             <Button>Save Changes</Button>
           </ModalFooter>
         </Modal>

         <Button variant="primary" onClick={handleShowModalOne}>Open Model</Button>
         <Button variant="primary" onClick={handleShowModalTwo}>Open Second Model</Button></>
      )
   }

   export default MyModals;