React/Redux/CSS - 模式放置

Question

我有一个 Card 和一个 Modal 组件

class Card extends Component {
  constructor() {
    super();
    this.state = { showModal: false }
  }

  render() {
    const { showModal } = this.state;
    return (
      {/* Some code */}
      {showModal && <Modal />}
    )
  }
}

所以，在需要之前，我不想渲染我的 Modal。逻辑。

Modal的工作，在此上下文中，是显示Card[的全部内容 =66=] 组件（Card 的高度是固定的，所以我无法显示其中的所有信息）。

---

现在，在更高层次上，我有以下内容：

class App extends Component {
  /* Some Code */
  render() {
    return (
      <div>
        <Content /> {/* Our content */}
        <Overlay /> {/* Our all-purpose-overlay (we need it for the Modal) */}
      </div>
    )
  }
}

---

问题是我的 Card 组件有样式 position: relative 而 Modal 组件有 z-index 和样式 position: absolute.

I did some research and I read that nested elements with non-static position will not work the same way regarding the z-index. The z-index will take effect only within the non-static element.

所以我无法让 Modal 出现在 Overlay 组件上方。此外，Card 组件有一个 overflow:hidden 属性。因此，Modal 被裁剪了。

下面是一个简单的演示。

function toggleModal() {
  var app = document.getElementById("app");
  app.classList.toggle("-modal");
}

:root {
  background: #ddd;
}

#app,
#overlay {
  height:100vh;
  width:100%;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay */

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  
  visibility: hidden;
  background: rgba(0,0,0,0.3);
}

.-modal #overlay {
  visibility: visible !important;
}

/* Card */

#card {
  position: relative;
  width: 250px;
  padding: 1em;
  border-radius: 5px;
  background: white;
  overflow: hidden; /* Problem */
}

.content {
  padding: 4em 0;
  text-align: center;
}

.btn {
  padding: 1em 2em;
  border:none;
  color:white;
  float: right;
  cursor: pointer;
  transition: 0.2s ease;
  background: #00abff;
}

.btn:hover {
  background: #0c9de4;
}

/* Modal */
#modal {
  width: 300px;
  
  position: absolute;
  top:0;
  left: 50px; /* Modal Gets clipped */
  
  visibility: hidden;
  background-color:red;
}

.-modal #modal {
  visibility: visible;
}

<div id="app">
  <div id="card">
    <div class="content">content</div>
    <button class="btn" onclick="toggleModal()">Display Modal</button>
    <div id="modal">
      <div class="content">
        <div>Modal</div>
        <div>With same content</div>
        <div>(under the Overlay and also cropped)</div>
      </div>
    </div>
  </div>
  <div id="overlay" onclick="toggleModal()"></div>
</div>

---

问题：我应该如何组织组件才能避免出现此问题？

我想在顶层只有一个 Modal。然后我简单地显示它。但是我需要将 Card 的 children 渲染到 Modal.

我应该如何进行？

Answer 1

由于您使用的是 React，我实际上建议您使用 Portal 来呈现您的模态。 Portals 在 React 中解决的一件事就是这个问题。如果您使用的是较新版本的 React (16+)，则 you already have access to portals.

如果您使用的是旧版本的 React，那没关系。 You can use an implementation like this (react-portal) instead.

现在，您的 components/markup 将呈现在包含 <div> 的上下文之外的完全独立的 React 树中，其中包含 position: relative，您可以使用绝对位置或固定位置无论你需要什么。