"Reactjs“如何在不使用钩子的情况下在函数组件中创建模态

在React中，函数组件通常使用钩子（如useState和useEffect）来管理状态和生命周期。然而，如果不使用钩子，我们可以通过将状态提升到父组件，并通过props将状态和回调函数传递给子组件来实现模态框的功能。

以下是一个简单的例子，展示了如何在不使用钩子的情况下在函数组件中创建一个模态框：

父组件

import React from 'react';
import Modal from './Modal';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  openModal = () => {
    this.setState({ showModal: true });
  };

  closeModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        {this.state.showModal && (
          <Modal onClose={this.closeModal}>
            <h2>Modal Content</h2>
            <p>This is the content of the modal.</p>
          </Modal>
        )}
      </div>
    );
  }
}

export default App;

子组件（模态框）

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

const Modal = ({ onClose, children }) => {
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={onClose}>Close</button>
        {children}
      </div>
    </div>,
    document.body
  );
};

export default Modal;

CSS样式

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

解释

父组件 (App):
- 使用类组件的state来管理模态框的显示状态。
- 提供打开和关闭模态框的方法，并通过props传递给子组件。

子组件 (Modal):
- 接收onClose回调函数和子元素作为props。
- 使用ReactDOM.createPortal将模态框内容渲染到document.body，这样可以确保模态框始终位于页面的最顶层。
CSS样式:
- 定义了模态框的基本样式，包括背景遮罩和内容框。