Использование выражений JavaScript

MDX — это расширение синтаксиса Markdown, позволяющее интегрировать JSX-компоненты и выражения JavaScript прямо в текст документации. Основная особенность MDX заключается в возможности комбинировать статический Markdown с динамическими возможностями React.

Встраивание выражений

В MDX выражения JavaScript заключаются в фигурные скобки {}. Любое корректное выражение JavaScript, возвращающее значение, может быть встроено в текст:

Сегодняшняя дата: {new Date().toLocaleDateString()}

Здесь new Date().toLocaleDateString() вычисляется при рендеринге страницы, и результат вставляется в текст. Фигурные скобки позволяют не только отображать значения, но и использовать переменные, функции и любые вычисления.

Использование переменных и функций

Переменные и функции можно определять в верхней части MDX-документа, как в обычном Jav * aScript:

export const userName = "Алексей";

function greet(name) {
  return `Привет, ${name}!`;
}

{greet(userName)}

MDX поддерживает ключевое слово export, что позволяет создавать константы и функции, которые будут доступны внутри документа, а также за его пределами при импорте в другие компоненты.

Интеграция с React-компонентами

Одно из сильных преимуществ MDX — возможность комбинировать JavaScript-выражения с JSX-компонентами. Компоненты можно использовать как внутри Markdown, так и передавать им вычисленные значения:

import Alert from './Alert'

<Alert message={`Сегодня ${new Date().toLocaleDateString()}`} type="info" />

Выражение внутри {} вычисляется перед рендерингом компонента, что позволяет динамически формировать пропсы.

Условия и тернарные выражения

MDX поддерживает тернарные операции и условные рендеринги прямо в тексте:

{userName ? `Привет, ${userName}` : "Привет, гость"}

Можно также комбинировать тернарные выражения с компонентами:

{userName ? <Alert message={`Привет, ${userName}`} /> : <Alert message="Привет, гость" />}

Массивы и методы итерации

Для вывода списков и коллекций удобно использовать методы массивов, такие как map. В MDX это выглядит естественно, почти как в JSX:

const fruits = ["Яблоко", "Банан", "Вишня"];

<ul>
  {fruits.map(fruit => (
    <li key={fruit}>{fruit}</li>
  ))}
</ul>

MDX корректно обрабатывает такие выражения, создавая динамические списки и структуры HTML на основе данных.

Инлайн-выражения в тексте

Вставка JavaScript-выражений в середину текста Markdown позволяет создавать динамичный контент:

Сегодня {new Date().getHours() < 12 ? "утро" : "день"} и пора начинать работу.

MDX гарантирует, что результат вычисления будет корректно интегрирован в текст, без необходимости использования дополнительных компонентов.

Стилизация и вычисляемые классы

Выражения JavaScript позволяют динамически изменять классы и стили элементов:

const isActive = true;

<div className={isActive ? "active" : "inactive"}>
  Состояние: {isActive ? "Активно" : "Неактивно"}
</div>

Такая гибкость делает MDX идеальным инструментом для документации, где нужно показывать примеры, реагирующие на данные или состояние приложения.

Ограничения и рекомендации

  • Все выражения должны быть валидными JavaScript. Ошибки при вычислении выражений приведут к падению рендеринга документа.
  • Сложная логика лучше выносить в функции и переменные через export, чтобы сохранять читаемость MDX.
  • Использование React-хуков внутри выражений напрямую не поддерживается, но их можно применять внутри компонентов, импортируемых в MDX.

Использование выражений JavaScript в MDX открывает мощные возможности для создания интерактивной и динамической документации, объединяя простоту Markdown с функциональностью React.

Оглавление