如何将id传递给模态窗口组件

<!-- 父页面 -->
<a href="/modal?id=123">Open Modal</a>

// 获取URL参数
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

const id = getQueryParam('id');
console.log(id); // 输出: 123

<!-- 父页面 -->
<button onclick="openModal('123')">Open Modal</button>

<script>
function openModal(id) {
    // 创建模态窗口内容
    const modalContent = document.createElement('div');
    modalContent.innerHTML = `<p>ID: ${id}</p>`;

    // 显示模态窗口
    document.body.appendChild(modalContent);
}
</script>

// 父组件
import React from 'react';
import Modal from './Modal';

function ParentComponent() {
    const id = '123';

    return (
        <div>
            <button onClick={() => setOpenModal(true)}>Open Modal</button>
            {openModal && <Modal id={id} onClose={() => setOpenModal(false)} />}
        </div>
    );
}