Aby wyrenderować HTML przechowywany w zmiennej w React, należy wykorzystać specjalną właściwość JSX o nazwie dangerouslySetInnerHTML. Umożliwia ona bezpośrednie wstawienie kodu HTML do elementu React. Należy jednak pamiętać, że ta metoda jest potencjalnie niebezpieczna – można w ten sposób narazić aplikację na ataki XSS (Cross-Site Scripting), jeśli zawartość pochodzi z niezaufanego źródła.
Wyrenderowanie HTML z użyciem dangerouslySetInnerHTML
Przykład podstawowy
Załóżmy, że masz zmienną tekstową zawierającą kod HTML:
const htmlString = "<p>To jest <strong>pogrubiony</strong> tekst.</p>"; Aby wyrenderować ten kod HTML wewnątrz komponentu React:
function MyComponent() { return ( <div dangerouslySetInnerHTML={{ __html: htmlString }} /> ); } Wyjaśnienie –
- Właściwość
dangerouslySetInnerHTML– oczekuje obiektu z kluczem__html; - Cała zawartość HTML wstawiana jest w miejsce tego elementu.
Praktyczne zastosowania
Renderowanie treści pochodzącej z CMS lub API
Często dynamiczna treść jest przechowywana w bazie danych jako string HTML, np. artykuły lub opisy produktów pobierane przez API:
const articleContent = "<h2>Nowość!</h2><p>Zapraszamy do lektury najnowszego artykułu.</p>"; function Article() { return ( <section dangerouslySetInnerHTML={{ __html: articleContent }} /> ); } Wyświetlanie formatowanego tekstu w panelu administracyjnym
Administratorzy często edytują treść za pomocą edytorów typu WYSIWYG. Efektem jest HTML, który trzeba później zaprezentować użytkownikom:
function AdminPreview({ html }) { return ( <div className="admin-preview" dangerouslySetInnerHTML={{ __html: html }} /> ); } Renderowanie fragmentów kodu w dokumentacji lub instrukcjach
Gdy chcesz pokazać fragmenty sformatowanego kodu, osadzone jako HTML:
const codeSnippet = '<pre><code>const x = 42;</code></pre>'; function CodeBlock() { return ( <div dangerouslySetInnerHTML={{ __html: codeSnippet }} /> ); } Najważniejsze wskazówki dotyczące bezpieczeństwa
- Nigdy nie renderuj HTML bezpośrednio od niezweryfikowanego użytkownika.;
- Jeśli musisz renderować dynamiczne HTML (np. z API) – zastosuj filtrację i sanitizację kodu po stronie backendu lub skorzystaj z bibliotek JavaScript do czyszczenia HTML znajdującego się po stronie klienta.
Alternatywy dla dangerouslySetInnerHTML
Gdy masz wpływ na to, skąd pochodzi treść, zawsze lepiej tworzyć treść jako komponenty React niż przechowywać ją jako surowy HTML. Daje to pełną kontrolę nad bezpieczeństwem i strukturą aplikacji.
Podsumowanie
- Użycie
dangerouslySetInnerHTMLto domyślny sposób renderowania stringów jako HTML w React, - mechanizm ten jest przeznaczony do specyficznych zastosowań i wymaga ostrożności,
- w przypadku dynamicznych danych zawsze weryfikuj i oczyszczaj HTML przed jego renderowaniem,
- tam, gdzie to możliwe, preferuj natywne komponenty React i przekazywanie danych jako props, a nie jako stringi HTML.
Dzięki tym zasadom zachowasz przejrzystość i bezpieczeństwo swojej aplikacji React, korzystając w odpowiedni sposób z możliwości dynamicznego renderowania HTML.
