Конвертация HTML-строки в JSX с помощью React и AJAX

Быстрый ответ

Для преобразования HTML-строки в JSX вы можете использовать dangerouslySetInnerHTML:

function HTMLToJSX({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Альтернативой и более безопасным вариантом служит react-jsx-parser:

import JsxParser from 'react-jsx-parser';

function HTMLToJSX({ html }) {
  return <JsxParser jsx={html} />;
}

Обратите внимание: использование dangerouslySetInnerHTML может быть рискованным с точки зрения безопасности из-за XSS. Не забудьте очистить входные данные. react-jsx-parser обеспечивает повышенную безопасность и поддерживает дополнительные компоненты.

Меры по управлению потенциальными рисками безопасности

Преобразование HTML-строк в JSX связано с определенными рисками, включая возможность XSS-атак. Очистка входных данных при использовании dangerouslySetInnerHTML обязательна:

import DOMPurify from 'dompurify';

function SuperSecureHTMLToJSX({ html }) {
  const sanitizedHTML = DOMPurify.sanitize(html);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
}

Более безопасной опцией следует считать использование Interweave:

import Interweave from 'interweave';

function SuperSecureHTMLToJSX({ html }) {
  return <Interweave content={html} />;
}

Использование библиотек для надежной обработки

Вы можете использовать html-react-parser или react-html-parser для прочтения HTML-строк и их преобразования в React-элементы с учетом безопасности:

import parse from 'html-react-parser';

function HTMLToJSX({ html }) {
  return <>{parse(html)}</>;
}

или:

import ReactHtmlParser from 'react-html-parser';

function HTMLToJSX({ html }) {
  return <>{ReactHtmlParser(html)}</>;
}

Эти библиотеки предоставляют возможность обработки в формате Unicode и защиту от XSS, регулярно обновляясь для повышения уровня безопасности.

Создание HTML с помощью массива JSX-элементов

Для управляемого создания HTML-элементов без использования сторонних библиотек вы можете использовать массив JSX-элементов:

function constructJSXFromString(htmlString) {
  if (htmlString.includes("<br>")) {
    return htmlString.split("<br>").map((line, index) => (
      <React.Fragment key={index}>
        {line}
        {index < htmlString.split("<br>").length – 1 && <br />}
      </React.Fragment>
    ));
  }
  return htmlString;
}

Автоматическое преобразование ссылок и интерполяция компонентов

Interweave автоматизирует преобразование URL и email-адресов в активные ссылки и поддерживает встраивание компонентов:

import Interweave, { UrlMatcher, EmailMatcher } from 'interweave';

function EnhancedHTML({ html }) {
  return (
    <Interweave
      content={html}
      matchers={[
        new UrlMatcher('url'),
        new EmailMatcher('email')
      ]}
    />
  );
}

Благодаря поддержке встраивания дополнительного контента Interweave выделяется среди аналогичных инструментов.

Использование эмодзи и смайликов

С помощью Interweave вы можете добавлять эмодзи и смайлики в HTML, делая ваш контент еще более выразительным:

import Interweave, { Emoji } from 'interweave';

function EmotionalHTML({ html }) {
  return <Interweave content={html} filters={[Emoji]} />;
}

Обновление состояния JSX-контента

При работе с React важно обновлять состояние вместе с JSX-контентом, чтобы отображение всегда было актуальным:

import React, { useState } from 'react';
import parse from 'html-react-parser';

function HTMLStringToJSX() {
  const [jsxContent, setJsxContent] = useState(null);

  const convertToJSX = (htmlString) => {
    const jsx = parse(htmlString);
    setJsxContent(jsx);
  };

  convertToJSX('<p>Добро пожаловать в React</p>');

  return <div>{jsxContent}</div>;
}

Визуализация

Превращение HTML-строк в JSX можно сравнить с преобразованием пустого полотна в великолепное произведение искусства:

Исходный HTML: "<div>Hello World</div>"

🔨🪓💎 (Процесс преобразования)

Результат JSX: <div>Hello World</div>

HTML-строка: 🗒️
JSX: 🖼️

Каждый HTML тег и атрибут трансформируются в JSX-элементы, создавая интерактивный пользовательский интерфейс.

Полезные материалы

1. Введение в JSX – React — официальное руководство от React по JSX.
2. @babel/plugin-transform-react-jsx · Babel — подробно о трансформации JSX с помощью Babel.
3. GitHub – reactjs/react-magic: AJAX-преобразование HTML с помощью React — библиотека для конвертирования HTML в JSX.
4. Элементы DOM – React — раздел документации React о внедрении HTML-строк через dangerouslySetInnerHTML.
5. GitHub – cure53/DOMPurify: DOM-очиститель от XSS для HTML, SVG и MathML — инструмент для очистки HTML и защиты от XSS при преобразовании в JSX.
6. html-to-jsx – npm — npm-пакет для преобразования HTML-кода в JSX.