为什么我的 html 对话框在 React 中没有渲染在我的内容之上

事实上，ReactJs并不是VanillaJs Dom在操纵.您必须使用useState，并将state更改为切换.因为第一次加载在VDOM中发生了一次，然后ReactDOM确实将VDOM综合到了主DOM.

现在，对于任何更改，都应该进行一些重新渲染.在这里，使用useState是可能的.

另外，在VDOM/DOM中 Select 元素时，强烈建议使用useRef.

import './Project.css';
import { useState, useRef } from 'react';

export default function Project({title, thumbnail_url, images, id}){
    const [isOpen, setOpenClose] = useState(false);
    const dialogRef = useRef();

    function toggleModal(){
        if (isOpen){
            setOpenClose(false);
            dialogRef.current?.close();
        }
        else {
            setOpenClose(true);
            dialogRef.current?.showModal();
        }
    }
    return(
        <>
        <div className="project" onClick={()=>toggleModal(id)}>
            <h2 className='headline project-title'>{title}</h2>
            <img src={thumbnail_url} alt="" />
            <dialog className="modal" ref={dialogRef} >
              <div>Dialoge</div>
              <button onClick={()=>toggleModal(id)}>close</button>
            </dialog>
        </div>
        
    </>