必须使用解构props赋值（react/destructuring-assignment）

IT技术 reactjs eslint eslint-config-airbnb
2021-04-22 20:48:00

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

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

导致此错误：

[eslint] 必须使用解构props赋值（react/destructuring-assignment）

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

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

1个回答
handleSubmit = (event) => {
    event.preventDefault();

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

    event.target.blur();
}
当你有多个值时，解构非常棒，const { className, title, text } = this.props; 比 this.props.title 等好多了。
2021-06-10 20:48:00
谢谢！我仍然无法计算如何从子组件调用这个 onSearch 函数
2021-06-13 20:48:00
在我看来，这个答案完美地说明了为什么这不是启用的好的 lint 规则。应该在可以提高可读性的地方使用解构，但在任何地方使用它来保持一致性会适得其反。在这里，它需要您将 3 行变成 5 行，其中有 2 个一次性const分配，即可读性和性能较差
2021-06-18 20:48:00
@JonWyatt 它更安全，尤其是在这种情况下，如果在其实现中使用 if的上下文绑定不正确，this.props.onSearch可能会造成混乱，从而导致难以调试的偷偷摸摸的问题。解构时，不正确的上下文绑定会很快失败，最后缩小会删除任何不必要的变量，因此性能不是问题。使用像这样的严格规则将避免团队甚至可能不知道的问题。this.propsthisonSearch
2021-06-20 20:48:00
您可以将onSearch函数作为道具传递给子组件
2021-06-21 20:48:00
其它你可能感兴趣的问题
上一篇Webpack + React + TypeScript：module未找到......在...... node_modules/react/ 下一篇从字符串创建 React 类的实例