Плейсхолдеры

Плейсхолдеры в MDX позволяют вставлять динамический или заранее определённый контент прямо в Markdown-разметку с возможностью использования компонентов React. Они являются одним из ключевых механизмов интеграции JSX внутри MDX-документов, обеспечивая гибкость при создании документации, блогов и интерактивных интерфейсов.

Использование JSX-компонентов как плейсхолдеров

В MDX можно включать JSX-компоненты напрямую:

<Alert type="warning">
  Внимание! Данные устарели.
</Alert>

Здесь <Alert /> выступает в роли плейсхолдера, который в момент рендеринга заменяется на соответствующий React-компонент с переданными пропсами.

Особенности:

  • Компонент должен быть импортирован в MDX-файл или объявлен в его области видимости.
  • Все атрибуты JSX передаются как свойства компонента, что позволяет динамически настраивать его поведение.
import Alert from './Alert';

export default function Page() {
  return (
    <MDXProvider>
      <MDXContent />
    </MDXProvider>
  );
}

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

MDX поддерживает синтаксис интерполяции выражений через {}. Это позволяет использовать переменные JavaScript как плейсхолдеры:

export const userName = "Иван";

Привет, {userName}! Добро пожаловать в документацию.

Ключевые моменты:

  • Внутри {} можно использовать любые валидные JavaScript-выражения.
  • Позволяет динамически формировать контент без необходимости создавать отдельные компоненты.

Функции как плейсхолдеры

Можно использовать функции, возвращающие JSX, для более сложной логики:

export function WelcomeMessage(user) {
  return <p>Добро пожаловать, {user}!</p>;
}

<WelcomeMessage user="Мария" />

Преимущества такого подхода:

  • Разделение логики и представления.
  • Возможность многократного переиспользования одного плейсхолдера в разных частях документа.

MDXProvider и настройка плейсхолдеров глобально

MDXProvider позволяет задавать, какие компоненты будут автоматически использоваться вместо стандартных элементов Markdown:

import { MDXProvider } from '@mdx-js/react';
import CodeBlock from './CodeBlock';

const components = {
  code: CodeBlock,
  h1: (props) => <h1 style={{ color: 'blue' }} {...props} />
};

<MDXProvider components={components}>
  <MDXContent />
</MDXProvider>

Особенности:

  • Все теги Markdown <h1>, <code> и др. могут быть заменены на кастомные компоненты.
  • Позволяет унифицировать оформление и поведение плейсхолдеров в рамках всего приложения.

Динамические плейсхолдеры через пропсы

MDX-файлы могут принимать props, что позволяет создавать интерактивные и настраиваемые элементы:

# Пример динамического контента

<ProfileCard name={props.name} age={props.age} />

При рендеринге:

<MDXContent name="Алексей" age={28} />

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

Плейсхолдеры и условия

MDX поддерживает условные выражения в JSX:

{isLoggedIn ? <p>Вы вошли в систему</p> : <p>Пожалуйста, войдите</p>}

Важно учитывать:

  • Логика должна быть выражена через валидный JSX.
  • Можно комбинировать несколько плейсхолдеров и условных операторов для создания сложных интерфейсов.

Интерактивные плейсхолдеры

MDX позволяет внедрять интерактивные элементы, которые реагируют на события пользователя:

function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onCl ick={() => setCount(count + 1)}>Нажато {count} раз</button>;
}

<Counter />

Плейсхолдер здесь не только отображает содержимое, но и управляет состоянием, полностью интегрируясь с React.

Сводка возможностей плейсхолдеров

  • Встраивание JSX-компонентов.
  • Использование переменных и выражений JavaScript.
  • Создание функций-плейсхолдеров для переиспользования.
  • Глобальная настройка компонентов через MDXProvider.
  • Передача пропсов для динамических компонентов.
  • Условная логика и интерактивность.
  • Полная интеграция с React и его экосистемой.

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

Оглавление