如何在React中使用Portal實(shí)現(xiàn)模態(tài)框

在React中使用Portal來實(shí)現(xiàn)模態(tài)框的步驟如下：

1. 首先，在你的項(xiàng)目中安裝React DOM包，如果還沒有安裝的話，可以使用以下命令進(jìn)行安裝：

npm install react-dom

2. 創(chuàng)建一個(gè)新的組件來表示模態(tài)框，例如Modal組件：

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;

3. 在你的應(yīng)用的根組件中創(chuàng)建一個(gè)新的div元素，用來承載模態(tài)框的內(nèi)容。這個(gè)div元素可以被命名為"modal-root"：

<div id="modal-root"></div>

4. 使用Modal組件來顯示模態(tài)框。你可以在需要顯示模態(tài)框的地方引入Modal組件，傳入需要顯示的內(nèi)容：

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實(shí)現(xiàn)模態(tài)框了。在點(diǎn)擊按鈕時(shí)，模態(tài)框?qū)?huì)顯示在頁面的根元素上。