react-modal组件框

好的，以下是使用第三方库 `react-modal` 创建的一个基本的模态框组件：

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); // 设置模态框挂载的根元素

function ModalComponent(props) {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>{props.buttonText}</button>
      <Modal
        isOpen={showModal}
        onRequestClose={handleCloseModal}
        contentLabel="Example Modal"
      >
        <h2>{props.modalTitle}</h2>
        <p>{props.modalContent}</p>
        <button onClick={handleCloseModal}>Close Modal</button>
      </Modal>
    </div>
  );
}

export default ModalComponent;

使用方法和之前的类似，接收三个props：

- `buttonText`：按钮上的文本
- `modalTitle`：模态框的标题
- `modalContent`：模态框中显示的内容

你可以在父组件中这样使用这个组件：

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

function App() {
  return (
    <div>
      <ModalComponent
        buttonText="点击我"
        modalTitle="这是一个模态框"
        modalContent="这是模态框中的内容"
      />
    </div>
  );
}

export default App;

当你点击“点击我”按钮时，会出现一个模态框，里面显示标题为“这是一个模态框”，内容为“这是模态框中的内容”，并且有一个“Close Modal”按钮用于关闭模态框。