ReactIntermediate

Portals ও Fragments

createPortal দিয়ে অন্য DOM-এ render এবং <> fragment-এর ব্যবহার — বাংলায়।

6টি অংশবাংলা ভাষায়

Portal — কেন দরকার

Modal, tooltip, dropdown-কে component tree-র গভীরে রাখলে CSS (overflow, z-index) ভাঙতে পারে। Portal দিয়ে সেগুলো document.body-এর মতো অন্য DOM-এ render করা যায় — React tree তখনো একই থাকে।

createPortal modaljsx

jsx

import { createPortal } from "react-dom";

function Modal({ open, onClose, children }) {
  if (!open) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose}>Close</button>
        {children}
      </div>
    </div>,
    document.body // actual DOM target
  );
}

Fragments

<> shorthandjsx

jsx

function TwoColumns() {
  return (
    <>
      <td>নাম</td>
      <td>বয়স</td>
    </>
  );
}

// long-form
<React.Fragment key={id}>
  <td>নাম</td>
  <td>বয়স</td>
</React.Fragment>

Fragment কেন

Fragment DOM-এ কোনো extra element যোগ করে না — তাই table/inline layout-এ wrapper div-এর কারণে CSS ভাঙা ঠেকাতে fragments দরকারি।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।