如何将Vanilla JS添加到我的react应用程序中以创建Image Modal弹出窗口？

// imageModal.js

// 创建一个函数，用于显示Image Modal弹出窗口
function showImageModal(imageUrl) {
  // 创建模态框容器
  const modalContainer = document.createElement('div');
  modalContainer.classList.add('modal-container');

  // 创建图像元素
  const imageElement = document.createElement('img');
  imageElement.src = imageUrl;

  // 创建关闭按钮
  const closeButton = document.createElement('button');
  closeButton.innerText = '关闭';
  closeButton.addEventListener('click', () => {
    // 关闭模态框
    modalContainer.remove();
  });

  // 将图像元素和关闭按钮添加到模态框容器中
  modalContainer.appendChild(imageElement);
  modalContainer.appendChild(closeButton);

  // 将模态框容器添加到页面中
  document.body.appendChild(modalContainer);
}

export default showImageModal;

// React组件

import React, { useEffect } from 'react';
import showImageModal from './imageModal';

function MyComponent() {
  useEffect(() => {
    // 在组件加载时调用showImageModal函数，传入图像URL
    showImageModal('https://example.com/image.jpg');
  }, []);

  return (
    <div>
      {/* 组件的其他内容 */}
    </div>
  );
}

export default MyComponent;