25. Czym są portale w React i jak je używać?

Portale w React umożliwiają renderowanie elementów poza ich rodzicem DOM, zachowując jednocześnie kontekst React. Są one przydatne, gdy trzeba renderować elementy, takie jak modale, narzędzia i inne interaktywne komponenty, które powinny pojawiać się na wyższym poziomie drzewa DOM.

Tworzenie portali w React:

1. Używanie ReactDOM.createPortal do renderowania elementu poza jego rodzicem:

import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      modalRoot
    );
  }
}

2. Używanie portalu w aplikacji:

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Moja aplikacja</h1>
        <Modal>
          <div className="modal">
            <p>To jest modal!</p>
          </div>
        </Modal>
      </div>
    );
  }
}

Zalety portali:

1. Izolacja komponentów: Portale pozwalają na izolację komponentów, takich jak modale, od reszty aplikacji.
2. Elastyczność renderowania: Umożliwiają renderowanie komponentów w dowolnym miejscu w drzewie DOM, co jest szczególnie przydatne w przypadku komponentów interaktywnych.
3. Zachowanie kontekstu: Mimo że komponenty renderowane przez portal znajdują się w innym miejscu w drzewie DOM, zachowują kontekst React, w tym stan i propsy.

Portale są potężnym narzędziem w React, umożliwiającym elastyczne zarządzanie renderowaniem komponentów w aplikacji.