Khi chúng ta tạo các thành phần trong React, thông thường chúng tồn tại trong cây thành phần. Điều này hầu hết đều ổn, nhưng đôi khi chúng ta muốn các phần nhất định của một thành phần xuất hiện hoặc ở một nơi nào đó hoàn toàn khác. bên ngoài cây thành phần Đây là một yêu cầu phổ biến khi chúng tôi tạo các cửa sổ bật lên theo phương thức, cần phải nằm trên tất cả các thành phần khác. Chúng tôi có thể tạo những thứ này trong một thành phần, nhưng cuối cùng chúng tôi sẽ muốn chúng ở trên mọi thứ khác và việc chúng được lồng trong nhiều thành phần có thể gây ra sự cố vì của chúng sẽ giảm xuống dưới bất kỳ thứ gì chúng có trong: z-index Để giải quyết vấn đề này, chúng ta có thể phương thức ra khỏi thành phần của chính nó và vào một phần khác của mẫu bằng cách sử dụng . dịch chuyển createPortal Điều này cho phép chúng tôi đặt thành phần của mình ở bất kỳ nơi nào khác mà chúng tôi mong muốn, chẳng hạn như cơ sở của cây HTML, bên trong thẻ hoặc bên trong một phần tử khác. body Mặc dù phần tử tồn tại trong cây thành phần, cung cấp cho chúng ta sức mạnh để đặt nó ở bất cứ đâu chúng ta muốn. createPortal Sử dụng cổng phản ứng Để cho bạn thấy các cổng hoạt động như thế nào, hãy xem chúng tôi có mã React cơ bản sau bên trong tệp của chúng tôi. Ở đây, chúng tôi muốn phương thức xuất hiện trên mọi thứ khác. Như vậy, chúng tôi đã tạo một có tên là . Đây cuối cùng là nơi chúng tôi muốn tất cả các phương thức của mình đi vào: App.js div #modal-container import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> </div> ); } export default App; Bên trong , tôi đã nhập một thành phần có tên là . Đây là thành phần Phương thức của chúng tôi, sẽ bật lên bất cứ khi nào người dùng nhấp vào nút. App.js Modal Bất cứ khi nào được đặt thành true bằng cách sử dụng , phương thức sẽ xuất hiện. Nếu không, nó sẽ biến mất. isModalOpen setIsModalOpen() Tôi cũng có một chút CSS để đảm bảo các phương thức của chúng tôi thực sự xuất hiện trên mọi thứ khác: #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; } Tạo {ortal của chúng tôi Tạo một cổng thông tin khá dễ dàng - có một chức năng, . Thay vì trả lại một số DOM trong React, chúng tôi trả lại thay thế. createPortal() Portal chấp nhận hai đối số - phần tử DOM mà chúng tôi muốn trả về - trong trường hợp này là phương thức - và phần tử DOM mà chúng tôi muốn dịch chuyển phần tử DOM của mình đến. createPortal() Vì vậy, đối số thứ hai của chúng tôi là , vì chúng tôi muốn đặt tất cả các phương thức của mình vào : document.getElementById('modal-container') #modal-container import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( <div className="modal"> <button onClick={onClickEvent}>Close Modal</button> <div className="modal-content">Modal Content goes here</div> </div>, document.getElementById('modal-container') ) ); }; export default Modal; Mặc dù chúng tôi đã dịch chuyển phần tử DOM của mình đến , nhưng nó vẫn hoạt động như một React con bình thường. Vì Cổng thông tin vẫn tồn tại trong cây React, các tính năng như ngữ cảnh mà phần tử đang sử dụng vẫn hoạt động như cũ. modal-container Cũng cần lưu ý rằng mặc dù chúng ta có và trong cùng một tệp, nhưng nơi bạn dịch chuyển phần tử DOM của mình đến có thể ở trong mã React của bạn. modal-container Modal bất kỳ đâu Vì vậy, bạn có thể dịch chuyển nó đến một thành phần con, phần tử hoặc cha hoàn toàn khác ở bất kỳ đâu trong DOM. Nó khá mạnh mẽ và hữu ích - vì vậy hãy sử dụng nó một cách khôn ngoan. Hãy nhìn lại HTML của chúng tôi: App.js <!-- .... --> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> Bây giờ, mặc dù nằm trong tiêu đề của chúng ta, nó sẽ xuất hiện trong bất cứ khi nào chúng ta mở phương thức bằng cách sử dụng nút: Modal #modal-container Sự kết luận Cổng là một công cụ khá mạnh trong React. Chúng là một cách hữu ích để giải quyết vấn đề chính với các hệ thống dựa trên thành phần - vận chuyển các yếu tố nhất định lên trên tất cả các yếu tố còn lại. Vì vậy, tôi hy vọng bạn thích hướng dẫn về cổng React này. Nếu bạn đang học React, trước tiên tôi khuyên bạn nên thành thạo Javascript - điều này bạn có thể làm với đầy đủ của tôi. Sổ tay Javascript Có một ngày tuyệt vời.
