javascript - 为什么 {...rest} 可以用在属性中

Question

我只是想知道为什么可以在参数中使用 {...rest} 缩短以下原始代码并在属性中展开，正如您在简化代码中看到的那样。

在简化代码中，它使用 {...rest} spread 来生成 value={value} onChange={onChange} type={type}。我不确定这怎么可能。

原始代码

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

...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将对象中的每个属性作为单独的 Prop 传递。如果您将 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);