Конвертация 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-элементы, создавая интерактивный пользовательский интерфейс.
Полезные материалы
- Введение в JSX – React — официальное руководство от React по JSX.
- @babel/plugin-transform-react-jsx · Babel — подробно о трансформации JSX с помощью Babel.
- GitHub – reactjs/react-magic: AJAX-преобразование HTML с помощью React — библиотека для конвертирования HTML в JSX.
- Элементы DOM – React — раздел документации React о внедрении HTML-строк через
dangerouslySetInnerHTML
. - GitHub – cure53/DOMPurify: DOM-очиститель от XSS для HTML, SVG и MathML — инструмент для очистки HTML и защиты от XSS при преобразовании в JSX.
- html-to-jsx – npm — npm-пакет для преобразования HTML-кода в JSX.