使用react封装一个自定义内容的弹窗方法

可以通过在 React 中使用 Portal 来实现弹窗。Portal 可以将组件渲染到 DOM 树中的另一个位置，这就允许我们在页面的任意位置渲染弹窗。

下面是一个简单的代码示例，演示如何使用 Portal 封装一个自定义内容的弹窗方法：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

const App = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Open Modal</button>
      {showModal && (
        <Modal onClose={() => setShowModal(false)}>
          <h1>Custom Content</h1>
          <p>This is some custom content for the modal.</p>
        </Modal>
      )}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

这个示例中，我们定义了一个 Modal 组件，它接收两个 props：onClose 和 children。onClose 是一个回调函数，用于关闭弹窗；children 是一个传递给 Modal 组件的自定义内容。

在 Modal 组件内部，我们使用 createPortal 将 Modal 组件的内容渲染到 document.body 上，以实现弹窗效果。

在 App 组件中，我们使用 useState 来管理 showModal 状态，它控制着 Modal 组件是否显示。当用户点击 Open Modal 按钮时，我们将 showModal 设置为 true，从而显示 Modal 组件。当用户点击 Modal 中的 Close 按钮时，我们将 showModal 设置为 false，从而关闭 Modal 组件。

这个示例只是一个基本的弹窗实现方法，你可以根据自己的需求对 Modal 组件进行更多的定制，例如添加动画效果、调整样式等。