请求将含<dialog>标签的HTML代码转换为React代码（保留原属性方法）

下面是将你提供的HTML代码转换后的React组件，完整保留了原生dialog的所有特性（包括showModal()、close()方法，以及表单的formmethod="dialog"功能）：

import React, { useRef } from 'react';
import './test.css'; // 引入原有的外部样式文件

const DialogDemo = () => {
  // 使用useRef获取dialog DOM元素
  const modalRef = useRef(null);

  // 打开模态框
  const openModal = () => {
    modalRef.current?.showModal();
  };

  // 关闭模态框
  const closeModal = () => {
    modalRef.current?.close();
  };

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('表单已提交！');
    closeModal();
  };

  return (
    <div>
      <h1>This is H1 Tag</h1>
      <button data-open-modal onClick={openModal}>Open me</button>
      
      <dialog data-modal ref={modalRef}>
        {/* 补充X按钮的关闭事件，原HTML中该元素带close-modal属性但未绑定逻辑 */}
        <p close-modal onClick={closeModal}>X</p>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat ipsa
          quod ipsum numquam officia, eveniet deleniti aspernatur quo accusamus
          distinctio eligendi necessitatibus commodi ipsam! Doloremque quod hic
          odio placeat aliquid. Ipsam esse cumque fugiat optio inventore, eligendi
          ex tempora ad adipisci accusamus exercitationem ratione itaque sapiente.
          Eveniet pariatur iusto rem soluta tenetur nemo enim qui adipisci
          dolorem? Ullam, quibusdam neque. Nisi necessitatibus repellat

          <button data-close-modal onClick={closeModal}>Close me</button>
        </p>
        <form onSubmit={handleSubmit}>
          <input type="text" />
          {/* formmethod="dialog"为原生特性，点击会自动关闭dialog */}
          <button type="submit" formmethod="dialog">Close me</button>
          <button type="submit">Submit me</button>
        </form>
      </dialog>

      {/* 内联样式对应原HTML中的style标签 */}
      <style jsx>{`
        dialog::backdrop {
          background-color: rgb(108, 113, 111);
        }
      `}</style>
    </div>
  );
};

export default DialogDemo;

关键说明： #

• 用useRef获取dialog的DOM引用，既保留原生方法调用，又符合React的DOM操作规范
• 所有data-*属性完整保留，与原HTML结构完全一致
• 原生dialog的showModal()和close()方法通过ref直接调用，功能与纯HTML版本无差异
• 表单的formmethod="dialog"原生特性完全保留，无需额外逻辑即可关闭模态框
• 补充了原HTML中带close-modal属性的<p>标签的关闭事件，完善交互逻辑
• 内联样式使用style jsx（适配Next.js），若使用Create React App，可将样式移至外部CSS文件或改用普通内联样式

内容的提问来源于stack exchange，提问作者Chanaka-7518