物料界面:如何在ReactJS中对物料进行一次模态显示？

npm install react-modal

yarn add react-modal

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

// 设置模态框的根节点
Modal.setAppElement('#root');

function MyComponent() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>打开模态框</button>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="物料模态框"
      >
        <h2>物料模态框</h2>
        <p>这是一个物料模态框的内容。</p>
        <button onClick={closeModal}>关闭模态框</button>
      </Modal>
    </div>
  );
}

export default MyComponent;