Question

我遵循了关于udemy的反应课程。我无法理解以下代码。 const InputGroup =（，以后，该对象是什么？我见过教程使用props，但是这里不使用props。而是使用对象。

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

最有可能在您学习时，这就是代码。

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

Answer 2

解构是ES2015的新概念。本质上，您从对象中获取密钥并将该密钥存储在变量中。然后，变量包含与对象内部的键值对相同的值。

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

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

因此，通过解构，您可以像这样直接从对象中提取值

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

对于InputGroup组件，您正在破坏道具对象。您将把这些已定义的属性中的每一个都当作变量使用。这样做的整体好处是节省时间，避免为要使用的每个属性键入 props.name等。

应对功能组件的破坏

2 个答案: