> Как передать все пропсы родительского компонента дочернему без явного перечисления в React (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: EvApps

Стек: React

> Пример ответа

В React для передачи всех пропсов родительского компонента дочернему без явного перечисления используется оператор расширения (spread operator) .... Это позволяет "развернуть" объект пропсов и передать их как отдельные атрибуты.

Пример:

JSX
function ParentComponent(props) {
  return <ChildComponent {...props} />;
}

Если нужно передать все пропсы, кроме некоторых (например, исключить className), можно использовать деструктуризацию:

JSX
function ParentComponent({ className, ...restProps }) {
  return (
    <div className={className}>
      <ChildComponent {...restProps} />
    </div>
  );
}

Также часто применяется в компонентах-обёртках (HOC) или при создании компонентов, которые делегируют пропсы ниже по дереву. Важно помнить, что при передаче всех пропсов дочерний компонент получит и служебные пропсы (например, key или ref), если они есть, поэтому для ref лучше использовать forwardRef.