在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层次结构之外呈现组件。我在这里写了一个关于如何做到这一点的教程