Есть ли у тса какой то extends interface от htmlelemnt

чтобы я могу любые базовые пропсы прокидывать в компонент без их описи?Например className, data-.....,, любые другие аттрибуты по умолчанию досступные в html?Речь о tsx

import { ButtonHTMLAttributes, FC } from 'react'; import classNames from 'classnames'; import styles from './Button.module.scss'; interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {} export const Button: FC<ButtonProps> = ({ children, className, ...props }) => { return ( <span className={styles.wrap}> <button className={classNames(styles.button, className)} {...props}> {children} </button> </span> ); };

а что для обычного дива?Где можно найти список всех возможных конструкций?

Там вроде просто в interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {} пишешь interface ComponentProps extends DivHTMLAttributes<HTMLDivElement> {} Но надо проверять, точно не помню ИДЕ просто подскажет, думаю принцип примерно понятен

interface ISocialsList extends HTMLAttributes<HTMLDivElement> но у меня теперь другая проблема. Как расширять className? Допустим внутри у компонента есть свой className. Я хочу подключать этот компонент из разных места расширяя его className. В компоненте чтобы не описывать все пропсы я просто делаю {...props}, но в разметке так же появляются лишине пропысы такие как item="[object, Object]" и className полностью перезатирается данными из вне. Как дополнять а не перезаписывать?

вот тут className извлекается и не попадает в props, можно например так написать (тогда title тоже не попадет) export const Button: FC<ButtonProps> = ({ children, className, title ...props }) можно свое добавить если оно не конфилктует с реальными просами элемента export const Button: FC<ButtonProps> = ({ children, className, ...props }) { title: string; } если конфликтует, то через Omit убрать и заново определить

но это ведь заменит, а не дополнит класснеймы.а выводить их отдельно как то не хочется

А я если честно не очень понял что ты хочешь сделать.

вообще там порядок важен, если так написать <div {...props} className = {'test-class'} /> то className = {'test-class'} затрет className в props

НУ, есть компонент <Btn> внутри себя он содержит определнные классы, глобальные для этого компонента,Например: <Btn className="btn"> Я подключаю этот <Btn> в многих местах на сайте и модифицирую его отображение с помощью классов.Я хочу уйти от прокидывания пропса с классом вручную и просто писать снаружи <Btn className="btn_primary"> и на выходе получить <button class="btn btn_primary"> </button>

ну вот я не хочу ничего затирать, а хочу расширить

Ну так оно сечас так для className и работает <button className={classNames(styles.button, className)} {...props}> здесь {...props} ничего не затрет, так как в нем нет className

Poylar
Вот так у меня затирает

Ну так у тебя неправильный синтаксис у меня совершенно по другому принципу решение работает

Poylar
Вот так у меня затирает

Внимательно посомтри на эту строку export const Button: FC<ButtonProps> = ({ children, className, title ...props }) => ЗАЧЕМ ТРИ ТОЧКИ ПЕРЕД PROPS?

понял. а я думал эта запись и моя идентичны