代码之家 › 专栏 › 技术社区 › shin

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

ecmascript-6 reactjs javascript

shin · 技术社区 · 7 年前

我只想知道为什么下面的原始代码可以用 {...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;

简化代码

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;

2 回复 | 直到 7 年前

Tholle 7 年前

...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);

Jonathan Rys 7 年前

在第一个片段中,您接受 type , name , label , error , value onChange 然后直接使用它们的值。

在第二个代码段中,使用rest操作符(来自 MDN

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 ):

扩展语法允许iterable(如数组表达式或字符串)在预期零个或多个参数(用于函数调用)或元素(用于数组文字)的位置展开,或允许对象表达式在预期零个或多个键值对(用于对象文字)的位置展开。

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组件一起使用并没有什么区别。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前