Reactjs 必须使用解构道具分配（反应/解构分配）

我已将eslint airbnb标准应用于我的代码，因此现在此代码：

handleSubmit=（事件）=>{
event.preventDefault（）；
this.props.onSearch（this.query.value）；
event.target.blur（）；
}

导致此错误的原因：

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

onSearch

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

---

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

谢谢！我仍然无法计算如何从子组件调用此onSearch函数。您可以将

onSearch

函数作为道具传递给子组件。我认为，这个答案完美地说明了为什么启用此lint规则不是一个好规则。在提高可读性的地方应该使用解构，但在任何地方使用它来实现一致性都会适得其反。在这里，它要求您将3行转换为5行，并带有2个一次性

const

赋值，即可读性和性能较差。当您有多个值时，const{className，title，text}=this.props；比this.props.title等要好得多。@JonWyatt它更安全，尤其是在

this.props.onSearch

的情况下，如果

onSearch

的上下文绑定不正确，在其实现中使用

this

可能会弄乱

this.props

，从而导致难以调试的隐蔽问题。在分解结构时，不正确的上下文绑定将很快失败，并且缩减最终将删除任何不必要的变量，因此性能不是问题。使用像这样的严格规则可以避免团队甚至可能没有意识到的问题。

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

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

    event.target.blur();
}