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

Posted 2023-02-22

【中文标题】必须使用解构道具分配（react/destructuring-assignment）

【英文标题】：Must use destructuring props 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 要求？

【参考方案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 混淆，从而导致偷偷摸摸的问题很难调试。解构时，不正确的上下文绑定会很快失败，而缩小最终会删除任何不必要的变量，因此性能不是问题。使用像这样的严格规则将避免团队甚至可能没有意识到的问题。