React Деструктуризация пропсов

При помощи деструктуризации можно ограничить количество свойств, принимаемых компонентом.

Пример

Допустим, компоненту нужен лишь атрибут color. Тогда мы можем указать это в определении функции следующим образом:


function Car({color}) {
  return (
    <h2>Мой автомобиль — {color}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="красный" year={1969} />
);

Замечание: Для деструктуризации пропсов React использует фигурные скобки {color}.

Также можно произвести деструктуризацию нужных свойств непосредственно внутри компонента.

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

Пример

Компонент принимает все свойства, но посредством деструктуризации выбирает только нужные:


function Car(props) {
  const {brand, model} = props;
  return (
    <h2>Я люблю свой {brand} {model}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="красный" year={1969} />
);

Оператор ...rest

Если заранее неизвестно, какое количество свойств будет передано в компонент, можно воспользоваться оператором ...rest, чтобы собрать оставшиеся свойства в отдельный объект.

То есть можно выбрать необходимые свойства, а остальные сохранить в отдельном объекте.

Пример

Компонент определяет два свойства — color и brand, а остальные помещаем в объект, например, { model: "Mustang", year: 1969 }.


function Car({color, brand, ...rest}) {
  return (
    <h2>Мой {brand} {rest.model} - {color}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" model="Mustang" color="красный" year={1969} />
);

Значения по умолчанию

При помощи деструктуризации можно установить дефолтные значения для пропсов.

Если свойство не задано, используется указанное вами значение по умолчанию.

Пример

Установим значение по умолчанию для цвета автомобиля ("синий"):


function Car({color = "синий", brand}) {
  return (
    <h2>Мой {color} {brand}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);