必须使用解构道具分配（react/destructuring-assignment）答案

【问题标题】：Must use destructuring props assignment (react/destructuring-assignment)必须使用解构道具分配（react/destructuring-assignment）
【发布时间】：2019-04-20 12:39:08
【问题描述】：

我已将 eslint airbnb 标准应用于我的代码，所以现在这段代码：

handleSubmit = (event) => {
  event.preventDefault();
  this.props.onSearch(this.query.value);
  event.target.blur();
}

导致此错误：

[eslint] 必须使用解构道具赋值（反应/解构分配）

onSearch 基本上是一个将值传递给父组件的触发器。

如何重构此代码以满足 eslint 要求？

【问题讨论】：

标签： reactjs eslint eslint-config-airbnb

【解决方案1】：

handleSubmit = (event) => {
    event.preventDefault();

    const {onSearch} = this.props
    const {value} = this.query
    onSearch(value)

    event.target.blur();
}

【讨论】：

谢谢！我仍然无法计算如何从子组件调用这个 onSearch 函数
你可以将onSearch函数作为prop传递给子组件
在我看来，这个答案完美地说明了为什么这不是一个好的 lint 规则启用。应该在提高可读性的地方使用解构，但在任何地方使用它来保持一致性会适得其反。在这里，它要求您将 3 行变成 5 行，并带有 2 个一次性的 const 分配，即可读性较差且性能较差
当你有多个值时，解构非常好， const { className, title, text } = this.props;比this.props.title等好多了。
@JonWyatt 它更安全，尤其是在这种情况下，如果onSearch 的上下文绑定不正确，this.props.onSearch 在其实现中使用this 可能会与this.props 混淆，从而导致偷偷摸摸的问题很难调试。解构时，不正确的上下文绑定会很快失败，而缩小最终会删除任何不必要的变量，因此性能不是问题。使用像这样的严格规则将避免团队甚至可能没有意识到的问题。