Проверка входных данных

MDX (Markdown + JSX) позволяет использовать JavaScript внутри Markdown, что открывает возможности динамического рендеринга компонентов. Одним из ключевых аспектов безопасной и корректной работы с MDX является проверка входных данных, особенно когда компоненты получают пропсы из внешних источников. Непроверенные данные могут привести к ошибкам рендеринга, некорректной работе логики компонентов или даже уязвимостям безопасности.

Использование PropTypes для проверки данных

В MDX-компонентах часто применяются React-компоненты. Для проверки типов данных можно использовать библиотеку PropTypes:

import PropTypes from 'prop-types';

const UserCard = ({ name, age, email }) => (
  <div>
    <h2>{name}</h2>
    <p>Возраст: {age}</p>
    <p>Email: {email}</p>
  </div>
);

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string,
};

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

  • isRequired гарантирует, что пропс не будет undefined или null.
  • При несоответствии типов в консоли React выводит предупреждение, что помогает выявлять ошибки на раннем этапе разработки.

Валидация данных через TypeScript

MDX полностью поддерживает TypeScript, что позволяет использовать строгую типизацию для пропсов:

interface UserCardProps {
  name: string;
  age: number;
  email?: string;
}

const UserCard: React.FC<UserCardProps> = ({ name, age, email }) => (
  <div>
    <h2>{name}</h2>
    <p>Возраст: {age}</p>
    <p>Email: {email}</p>
  </div>
);

Преимущества TypeScript:

  • Ошибки типов выявляются на этапе компиляции, а не во время выполнения.
  • Уменьшается риск получения некорректных данных из внешних источников.
  • Автодополнение и документация типов повышают продуктивность при работе с MDX.

Встроенные проверки значений

Даже при использовании PropTypes или TypeScript иногда требуется дополнительная проверка значений на уровне выполнения:

const UserCard = ({ name, age }) => {
  if (typeof name !== 'string' || name.trim() === '') {
    throw new Error('Имя пользователя должно быть непустой строкой');
  }
  if (typeof age !== 'number' || age < 0) {
    throw new Error('Возраст должен быть положительным числом');
  }

  return (
    <div>
      <h2>{name}</h2>
      <p>Возраст: {age}</p>
    </div>
  );
};

Рекомендации:

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

Использование схем валидации с библиотекой Zod

Для сложных структур данных удобно применять библиотеки схем, например, Zod или Yup:

import { z } from 'zod';

const userSchema = z.object({
  name: z.string().min(1),
  age: z.number().nonnegative(),
  email: z.string().email().optional(),
});

const UserCard = ({ data }) => {
  const parsedData = userSchema.parse(data);

  return (
    <div>
      <h2>{parsedData.name}</h2>
      <p>Возраст: {parsedData.age}</p>
      <p>Email: {parsedData.email}</p>
    </div>
  );
};

Преимущества схем:

  • Возможность проверки сложных вложенных объектов.
  • Автоматическая генерация сообщений об ошибках.
  • Легкая интеграция с MDX и React-компонентами.

Практика безопасного получения данных

При работе с MDX важно учитывать источник данных. Лучшие практики включают:

  1. Очистка пользовательских данных:

    • Удаление потенциально опасных символов.
    • Преобразование типов перед рендерингом.

  2. Использование дефолтных значений:

    const UserCard = ({ name = 'Неизвестный', age = 0 }) => { ... }

  3. Асинхронная проверка данных при получении с API:

    const fetchUser = async () => {
  const response = await fetch('/api/user');
  const data = await response.json();
  return userSchema.parse(data);
};

Сводка ключевых подходов

  • PropTypes — быстрый способ проверки типов во время разработки.
  • TypeScript — строгая статическая типизация и автодополнение.
  • Встроенные проверки значений — предотвращение некорректного рендеринга.
  • Схемы валидации (Zod/Yup) — проверка сложных структур и обработка ошибок.
  • Дефолтные значения и очистка данных — дополнительная гарантия корректного отображения.

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

Оглавление