Javascript 为什么{…rest}可以在属性中使用

我只是想知道为什么可以在参数中使用

{…rest}

缩短以下原始代码，并在属性中扩展，正如您在简化代码中看到的那样

在简化的代码中，它使用

{…rest}

扩展来生成

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;

从“React”导入React；
常量输入=（{type，name，label，error，value，onChange}）=>{
返回(
{label}
{error&&{error}
);
};
导出默认输入；

简化代码

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;

从“React”导入React；
常量输入=（{name，label，error，…rest}）=>{
返回(
{label}
{error&&{error}
);
};
导出默认输入；

用于将所有未分解的属性放在一个单独的对象中

const obj={
姓名：'姓名'，
标签：“标签”，
错误：“错误”，
福：‘福’，
酒吧：“酒吧”
};
常量{name，label，error，…rest}=obj；
控制台日志（rest）在第一个代码段中，您接受
类型
，
名称
，
标签
，
错误
，
值
和
更改
，然后按照您的说明直接使用它们的值

在第二个代码段中，使用rest运算符（从）：

函数的最后一个参数的前缀可以是。。。这将导致所有剩余的（用户提供的）参数放置在“标准”javascript数组中。只有最后一个参数可以是“rest参数”

rest参数在vanilla JavaScript中的作用相同：


const数据={
“项目1”：“苹果”，
“项目2”：“香蕉”，
“第三项”：“葡萄”，
“第4项”：“酸橙”
};
函数f（{item1，item2，…data}）{
console.log（“item1:”，item1）；
console.log（“item2:，item2”）；
日志（“item3:，data.item3”）；
console.log（“item4:”，data.item4）；
}
f（数据）
对象为什么会变成value={value}onChange={onChange}type={type}？@shin您问题中的
rest
对象包含属性
type
，
value
，
onChange
，当您在JSX中传播该属性时，它就变成了您所写的内容。在引擎罩下，它实际上是React.createElement（“输入”{name:name，id:name，className:“表单控件”，value:value，onChange:onChange，type:type}）