在 React Class 組件上顯示模態

Question

我正在創建一個簡單的模式，我想在單擊按鈕后彈出它，但我有一個顯示問題。 我在 Offer.js 組件中使用它

import React, { Component } from 'react';

import './Offer.scss';

import Modal from '../../common/Modal/Modal';

class Offer extends Component {
  state = {
    showModal: false,
  };

  openModal = () => {
    this.setState({ showModal: true });
    console.log('modal');
  };
  closeModal = () => {
    this.setState({ showModal: false });
  };
  render() {
    const { showModal } = this.state;
    return (
      <section className='Offer'>
        <div className='Offer__Container'>
          <div className='Offer__Content'>
            <div className='Offer__Content-text'>
              <h3>Tadeusz</h3>
              <p>
                Wreszcie po całym domu dawne obyczaje swe rodzinne duszę
                utęsknioną
              </p>
              <button
                onClick={() => this.openModal()}
                className='btn btn-offer'>
                Więcej
              </button>
            </div>
            <Modal show={showModal} close={() => this.closeModal()} />
          </div>
        </section>
    );
  }
}

export default Offer;

正如你所看到的，我把我的內容放在了后面。 但這我發現了一個問題，現在我的模態只是顯示在我的內容旁邊

[![模態顯示][1]][1][1]：https://i.stack.imgur.com/KX0d9.png

我希望它顯示在我的組件上，而不是在內容旁邊。 我不想使用鈎子，因為這只是簡單的組件，它是為了學習目的。

Answer 1

通常，React 中的模態問題是組件可以非常深地嵌套，因此如果您嘗試從子組件渲染它，因為您想在父組件上方渲染它，則會遇到問題。

在這種情況下，你可以使用 CSS 技巧來克服這個問題，並將z-index設置為一個高值，也許position: fixed; 或position: absolute; top: 0; left: 0; 取決於你的目的。

更好的方法是使用 React Portals，它允許您在當前 DOM 層次結構之外渲染組件。 我在這里寫了一個關於如何做到這一點的教程