Спредить все пропсы напрямую на DOM-элементы — это может привести к появлению неизвестных HTML-атрибутов, что нарушает стандарты HTML и может вызвать неожиданное поведение или предупреждения в консоли браузера.
Когда ты спредишь пропсы без фильтрации, кастомные React-пропсы попадают на базовый DOM-элемент. Например:
const ComponentB = (props) => <div {...props} />
Если в props есть isDisplay={true}, это превращается в <div isDisplay="true">, а это невалидный HTML-атрибут.
Используй деструктуризацию пропсов, чтобы отделить пропсы компонента от безопасных для DOM пропсов. Извлеки нужные тебе пропсы и используй оператор ...rest, чтобы собрать оставшиеся:
const ComponentB = ({ isDisplay, ...domProps }) => (
<div {...domProps}>ComponentB</div>
)
Посмотри на этот родительский компонент:
const ComponentA = () => (
<ComponentB isDisplay={true} className="componentStyle" />
)
Дочерний компонент безопасно обрабатывает пропсы:
isDisplay извлекается и не передаётся на DOMclassName попадает в ...domProps и безопасно применяется к <div>Распространение всех props напрямую на DOM элементы проблематично, потому что пользовательские React props вроде isDisplay становятся невалидными HTML атрибутами элемента.
Новый — ещё не проверен сообществом
Вы