Условный рендеринг

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

В MDX условный рендеринг работает так же, как и в обычных компонентах React, поскольку MDX-трансформируется в JSX. Это открывает доступ к логическим выражениям, тернарным операторам и компонентам высшего порядка.

{isLoggedIn ? <p>Добро пожаловать!</p> : <p>Пожалуйста, войдите в систему.</p>}

В этом примере текст отображается в зависимости от значения переменной isLoggedIn. Если true, выводится приветствие; если false, — предложение авторизоваться.

Использование логических операторов

Для упрощения кода часто используют логический оператор &&, который позволяет рендерить компонент только при истинности условия:

{hasNotifications && <NotificationList notifications={notifications} />}

Здесь <NotificationList> отобразится только если hasNotifications равно true. Такой подход уменьшает вложенность тернарных операторов и делает код более читаемым.

Условный рендеринг блоков Markdown

MDX позволяет комбинировать JSX и стандартный Markdown. Это дает возможность рендерить целые разделы Markdown на основе условий:

{showIntroduction && (
  <>
    ## Введение
    Этот раздел появится только если `showIntroduction` равен true.
  </>
)}

Блок оборачивается в фрагмент <>...</>, что позволяет использовать несколько Markdown-элементов внутри одного условия. Без фрагмента JSX не будет корректно обработан.

Динамические компоненты и пропсы

Часто возникает необходимость рендерить разные компоненты на основе данных:

const Alert = ({ type, message }) => (
  <div className={`alert alert-${type}`}>{message}</div>
);

const alerts = [
  { type: 'success', message: 'Операция выполнена' },
  { type: 'error', message: 'Произошла ошибка' },
];

{alerts.map((alert, index) => (
  alert.type === 'error' ? <Alert key={index} {...alert} /> : null
))}

Использование map с условием позволяет фильтровать и динамически создавать элементы без лишней логики в родительском компоненте.

Условный рендеринг на основе состояния

MDX-файлы поддерживают React hooks, поэтому можно управлять отображением контента через состояние:

import { useState } from 'react';

const ToggleContent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onCl ick={() => setVisible(!visible)}>
        {visible ? 'Скрыть' : 'Показать'} контент
      </button>
      {visible && <p>Секретный контент отображается здесь.</p>}
    </>
  );
};

<ToggleContent />

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

Практика с компонентами высшего порядка

Можно обернуть условный рендеринг в отдельный компонент, повышая читаемость и переиспользуемость кода:

const Conditional = ({ condition, children }) => condition ? children : null;

<Conditional condition={user.isAdmin}>
  <p>Административные функции доступны</p>
</Conditional>

Такой компонент облегчает управление отображением сложных блоков и упрощает логику MDX-файлов, особенно если условий много.

Условный рендеринг с внешними данными

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

import { useEffect, useState } from 'react';

const UserProfile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(setUser);
  }, []);

  return (
    <>
      {user ? (
        <p>Привет, {user.name}!</p>
      ) : (
        <p>Загрузка данных пользователя...</p>
      )}
    </>
  );
};

<UserProfile />

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