Question

我在React应用程序中使用以下软件包来生成Recaptcha组件：https://github.com/appleboy/react-recaptcha

这是组件的外观，带有eslint警告：

this.recaptchaRef的定义如下：this.recaptchaRef = React.createRef();

此引用允许我在表单出错时重置Recaptcha，例如：this.recaptchaRef.reset();

我如何能在不编写ESlint注释的情况下解决此错误？

Answer 1

箭头函数，如果{之后没有=>，则将返回后面的任何表达式。目前，您的箭头函数正在将event分配给this.recaptchaRef ，并且返回event。（即使使用者完全忽略了返回值，它仍然会产生棉绒错误。）因此，只需使用大括号确保不会返回任何内容：

ref={(event) => {
  this.recaptchaRef = event;
}}

Answer 2

根据Arrow functions的文档，他们可以具有“简洁的正文”或通常的“块正文”。

在简洁的正文中，仅指定一个表达式，该表达式成为显式返回值。在块体中，必须使用显式的return语句。

因此，在您使用的示例中，指定了“简洁主体”。简洁的机身意味着没有周围的花括号。因此，即使没有return关键字，也将返回表达式。由于您要避免返回表达式，因此需要将主体更改为“块主体”，即在=>运算符之后指定大括号，即

ref = {event => {
    this.recaptchaRef = event;
}};