Hello World
\"}\nHello World
\");\n ```\n\n #### Утиліта `renderHTML()`\n\n Автономна утиліта для відтворення поза компонентами.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### Утиліта `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\nHello World
\")}Hello World
\")}Hello World
\"}\nHello World
\")}Hello World
\")}Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Ця документація застаріла, базову версію оновлено станом на 24 березня 2026 р..
Перейти до англійської версії документаІсторія версій
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024.03.2026
- "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"v8.5.024.03.2026
- "Додано HTMLRenderer / useHTMLRenderer / утиліту renderHTML"v8.0.022.01.2026
- "Додано підтримку парсингу HTML"v8.0.020.01.2026
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюЯкщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.
Посилання на документацію на GitHubСкопіювати документацію у форматі Markdown в буфер обміну
Вміст HTML / HTML в Intlayer
Intlayer підтримує HTML-контент, що дозволяє вбудовувати насичений, структурований вміст у ваші словники. Цей вміст може відображатися за допомогою стандартних HTML-тегів або замінюватися на користувацькі компоненти під час виконання.
Оголошення HTML-контенту
Ви можете оголосити HTML-контент за допомогою функції html або просто як рядок.
Використовуйте функцію html для явного оголошення HTML-контенту. Це гарантує правильне відображення стандартних тегів, навіть якщо автоматичне виявлення вимкнено.
Скопіюйте код у буфер обміну
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // можна встановити у файлі конфігурації content: { myHtmlContent: html("<p>Привіт <strong>Світ</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;Вузол html()
Функція html(), це нова можливість в Intlayer v8, яка дозволяє явно визначати HTML-контент у ваших словниках. Хоча Intlayer часто може автоматично визначати HTML-контент, використання функції html() має кілька переваг:
- Типобезпека: Функція
html()дозволяє визначати очікувані пропси для користувацьких компонентів, забезпечуючи краще автодоповнення та перевірку типів у вашому редакторі. - Явне оголошення: Це гарантує, що рядок завжди буде розглядатися як HTML, навіть якщо він не містить стандартних HTML-тегів, які могли б активувати автоматичне визначення.
- Визначення користувацьких компонентів: Ви можете передати другий аргумент у
html(), щоб визначити користувацькі компоненти та очікувані типи їхніх пропсів.
Скопіюйте код у буфер обміну
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Привіт'>Світ</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });При використанні методу .use() для HTML-вузла надані вами компоненти будуть перевірятися на відповідність визначенню, вказаному у функції html() (якщо воно доступне).
Відтворення HTML
Відтворення може виконуватися автоматично системою контенту Intlayer або вручну за допомогою спеціалізованих інструментів.
Автоматичне відтворення (за допомогою useIntlayer)
Коли ви отримуєте доступ до контенту через useIntlayer, HTML-вузли вже підготовлені до відтворення.
HTML-вузли можна відтворювати безпосередньо як JSX. Стандартні теги працюють автоматично.
Скопіюйте код у буфер обміну
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Використовуйте метод .use() щоб надати користувацькі компоненти або перевизначити теги:
Скопіюйте код у буфер обміну
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Глобальна конфігурація за допомогою HTMLProvider
Ви можете налаштувати відтворення HTML глобально для всього застосунку. Це ідеально підходить для визначення користувацьких компонентів, які мають бути доступні в усьому HTML-контенті.
Скопіюйте код у буфер обміну
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>, }} > {children} </HTMLProvider>);Ручне відтворення та розширені інструменти
Якщо вам потрібно відтворити сирі HTML-рядки або ви хочете більше контролю над мапуванням компонентів, використовуйте наступні інструменти.
Компонент <HTMLRenderer />
Відтворіть HTML-рядок із конкретними компонентами.
Скопіюйте код у буфер обміну
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>Хук useHTMLRenderer()
Отримайте попередньо налаштовану функцію рендерера.
Скопіюйте код у буфер обміну
import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({ components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");Утиліта renderHTML()
Автономна утиліта для відтворення поза компонентами.
Скопіюйте код у буфер обміну
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Довідник опцій
Ці опції можна передавати в HTMLProvider, HTMLRenderer, useHTMLRenderer та renderHTML.
Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані
| Опція | Тип | Типово | Опис |
|---|---|---|---|
components | Record<string, any> | {} | Мапа HTML-тегів або назв користувацьких компонентів до компонентів. |
renderHTML | Function | null | Користувацька функція відтворення для повної заміни стандартного HTML-парсера (Тільки для провайдерів Vue/Svelte). |
Примітка: Для React та Preact стандартні HTML-теги надаються автоматично. Вам потрібно передавати проп components, лише якщо ви хочете перевизначити їх або додати власні компоненти.