溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在React中使用Portal來實現模態框的步驟如下：
npm install react-dom
import React from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children }) => {
const modalRoot = document.getElementById('modal-root');
return ReactDOM.createPortal(children, modalRoot);
};
export default Modal;
<div id="modal-root"></div>
import React, { useState } from 'react';
import Modal from './Modal';
const App = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => {
setIsOpen(!isOpen);
};
return (
<div>
<button onClick={toggleModal}>Toggle Modal</button>
{isOpen && (
<Modal>
<div>Modal Content</div>
</Modal>
)}
</div>
);
};
export default App;
通過上述步驟，你就可以在React中使用Portal實現模態框了。在點擊按鈕時，模態框將會顯示在頁面的根元素上。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
