反应功能组件解构

Question

我学习了关于 udemy 的反应课程。我无法理解以下代码。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 对象。您将每个定义的属性转变为可供使用的变量。这样做的总体好处是节省时间，避免为您要使用的每个属性键入props.name 等。

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

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

const InputGroup = ({
  name,
  placeholder,
})