@luxurypluxury

Почему {...props} с библиотеки не работают в next.js?

Сделал ui библиотеку, запушил ее на npm. В чистом реакт проэкте стандартные пропсы допустим для инпута отлично работают, в next.js проэкте подсвечивает красным. Почему так?
Вот код инпута в библиотеке:
export interface AuthFieldProps {
    heading: string
}

const AuthField: React.FC<AuthFieldProps> = ({ heading, ...props }) => {
    return (
        <div className={styles.field}>
            <label htmlFor='field'>{heading}</label>
            <input id='field' {...props} />
        </div>
    )
}

64032d12bb806453856578.png
  • Вопрос задан
  • 74 просмотра
Решения вопроса 2
@kalsc12345
Неизвестный человек.
Слушай, А попробуй так:
import React, { InputHTMLAttributes } from 'react';
import styles from './AuthField.module.css';

export interface AuthFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  heading: string;
}

const AuthField: React.FC<AuthFieldProps> = ({ heading, ...props }) => {
  return (
    <div className={styles.field}>
      <label htmlFor='field'>{heading}</label>
      <input id='field' {...props} />
    </div>
  );
};
Ответ написан
Комментировать
TemaSM
@TemaSM
Fullstack, DevOps, InfSec
Ошибка возникает потому, что тип AuthFieldProps, который вы определили, не включает в себя свойства type, placeholder и required, которые передаются через оператор spread {...props} в input.
Когда компилятор TypeScript пытается присвоить значения type, placeholder и required к типу AuthFieldProps, он обнаруживает, что эти свойства не определены в интерфейсе AuthFieldProps и выдает ошибку.

Чтобы решить эту проблему, вам нужно добавить свойства type, placeholder и required в интерфейс AuthFieldProps.

Рассмотрев тайпинги вашей либы reconnect-ui (которую кстати не обязательно было публиковать на npm), вижу как раз это:
64033ea6ddbe0579804563.png
Как можно пофиксить:
export interface AuthFieldProps extends React.HTMLProps<HTMLInputElement> {
    heading: string
}

Здесь мы расширяем интерфейс AuthFieldProps с помощью React.HTMLProps<HTMLInputElement>, чтобы включить все свойства, которые могут быть переданы в input, включая type, placeholder и required.
Теперь TypeScript не будет выдавать ошибку и ваш компонент должен работать как в React-проекте, так и в Next.js проекте.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы