> Как интегрировать компонент с внешней валидацией в React? (React)

Для интеграции внешней валидации в React-компонент можно использовать библиотеку React Hook Form с Zod или Yup. Пример с Zod:

JSX
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Некорректный email'),
  password: z.string().min(6, 'Минимум 6 символов'),
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}
      
      <input {...register('password')} type="password" placeholder="Пароль" />
      {errors.password && <span>{errors.password.message}</span>}
      
      <button type="submit">Отправить</button>
    </form>
  );
}

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

• zodResolver связывает схему валидации с React Hook Form
• register подключает поля формы к валидации
• errors содержит сообщения об ошибках из схемы
• Валидация срабатывает при отправке формы и изменении полей

Такой подход обеспечивает декларативную, типизированную и легко поддерживаемую валидацию без ручного управления состоянием ошибок.