React功能组件解构

Question

我在udemy上参加了react课程。我看不懂下面的代码。const InputGroup = (，后面的这个对象做了什么？我见过教程使用，道具，但这里道具是不用的。而是使用一个对象。

const InputGroup = ({
  name,
  placeholder,
  value,
  error,
  icon,
  type,
  onChange,
  autoComplete,
}) => {
  return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
      </div>
      <input
        type={type}
        className={classnames('form-control form-control-lg', {
          'is-invalid': error,
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        autoComplete={autoComplete}
      />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  )
}

Answer 1

解构对于ES2015来说是一个新概念。本质上，您从对象中获取键并将该键存储在一个变量中。然后，该变量包含的值与它作为对象内的键值对时的值相同。

假设您有一个对象，该对象用作函数的参数

{name: "Shashika", job: "Developer"}

因此，通过解构，可以直接从对象中提取值，如下所示

function({name, job}){
   console.log(name + "is a " + job)
}

在您的InputGroup组件的情况下，您正在解构 props object。您将这些已定义的属性中的每一个都转换为可供使用的变量。这样做的总体好处是节省了时间，避免了为要使用的每个属性键入props.name和etc。

Answer 2

很可能当你学习的时候，这就是代码。

const InputGroup = (props) => {

// 1. Destructure props
const { name, placeholder } = props;

// OR you can use this but desturcture is the best option

// 2. Without destructure
const name = props.name;
const placeholder = props.placeholder

return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
      </div>
      <input
        type={type}
        className={classnames('form-control form-control-lg', {
          'is-invalid': error,
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        autoComplete={autoComplete}
     />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
    )
}

这里的析构是在第一点上完成的，但我们可以做的是在顶层进行解构，并且可以直接访问JSX中的props属性，就像在给定的代码中一样。

const InputGroup = ({
  name,
  placeholder,
})