Почему {... rest} можно использовать в атрибутах

Question

Я просто хочу знать, почему следующие исходные коды можно сократить, используя {...rest} в аргументах и ​​распространяя в атрибутах, как вы можете видеть в упрощенном коде.

В упрощенном коде для распространения value={value} onChange={onChange} type={type} используется {...rest}. Я не уверен, как это возможно.

Оригинальный код

import React from "react";

const Input = ({ type, name, label, error, value, onChange }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input 
        value={value}
        onChange={onChange}
        type={type}
        name={name} 
        id={name} 
        className="form-control" />
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
};

export default Input;

Упрощенный код

import React from "react";

const Input = ({ name, label, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input {...rest} name={name} id={name} className="form-control" />
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
};

export default Input;

Answer 1

В первом фрагменте вы принимаете type, name, label, error, value и onChange, а затем используете их значения, как вы указали.

Во втором фрагменте вы используете оператор rest (от MDN ):

Последний параметр функции может начинаться с префикса ..., что приведет к тому, что все оставшиеся (предоставленные пользователем) аргументы будут помещены в "стандартный" массив javascript. Только последний параметр может быть «параметром покоя».

Параметр rest в ванильном JavaScript работает так же:

const data = {
  "item1": "apples",
  "item2": "bananas",
  "item3": "grapes",
  "item4": "limes"
};

function f({item1, item2, ...data}) {
  console.log("item1:", item1);
  console.log("item2:", item2);
  console.log("item3:", data.item3);
  console.log("item4:", data.item4);
}

f(data);

Как и оператор спреда (от MDN ):

Синтаксис Spread позволяет расширять итерацию, такую ​​как выражение массива или строку, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементы (для литералов массива), или выражение объекта, расширяемое в местах, где Ожидается ноль или более пар ключ-значение (для литералов объекта).

const data = {
  "item1": "apples",
  "item2": "bananas",
  "item3": "grapes",
  "item4": "limes"
};

const f = (items) => {
  for (let x in items) {
    console.log(x + ":", items[x]);
  }
}

f({...data})

Тот факт, что вы используете их с компонентами React, не имеет значения.

Answer 2

...rest используется для помещения всех свойств, которые не являются деструктурированными, в отдельный объект.

const obj = {
  name: 'name',
  label: 'label',
  error: 'error',
  foo: 'foo',
  bar: 'bar'
};
const { name, label, error, ...rest } = obj;

console.log(rest);

Этот rest объект затем используется для spread syntax для передачи каждого свойства в объекте в качестве отдельной реквизита. Может быть легче понять, почему это работает, если вы пишете JSX как скомпилированные React.createElement вызовы.

React.createElement("input", {
  name: name,
  id: name,
  className: "form-control",
  ...rest
});

const obj = {
  name: 'name',
  label: 'label',
  error: 'error',
  foo: 'foo',
  bar: 'bar'
};
const { name, label, error, ...rest } = obj;
const result = {
  name: name,
  id: name,
  className: "form-control",
  ...rest
};

console.log(result);