箭头函数不应该返回赋值吗？

我的代码在应用程序中正常工作，但是，我的 eslint 不喜欢它，并说我不应该返回赋值。这有什么问题吗？

<div ref={(el) => this.myCustomEl = el} />
73148 次浏览
小开

你在隐式地返回一个任务。this.myCustomEl = el是一项任务。您可以通过将箭头函数更改为 (el) => { this.myCustomEl =el }来修复这个 linting 错误，因为您将它包装在 {}而不是 ()中，所以它不再隐式返回。

边注 : 在渲染方法中内联声明一个箭头函数会破坏 PureComponent，因为每次组件渲染时都必须声明一个新的匿名函数，所以 PureComponent所做的浅道具比较会被破坏，并且总是重新渲染。

尝试将其作为组件的一个方法。

class MyClass extends React.PureComponent {
getRef = (el) => { this.ref = el; }


render() {
return <div ref={this.getRef} />;
}
}

如果上面的语法对你不起作用，你可以使用下面的语法:

class MyClass extends React.PureComponent {
constructor(props) {
super(props);


this.ref = null;


this.getRef = this.getRef.bind(this);
}


getRef(el) {
this.ref = el;
}


render() {
return <div ref={this.getRef} />;
}
}
小开
最佳答案

解决方案:

<div ref={(el) => { this.myCustomEl = el }} />

解释:

您当前的代码相当于:

<div ref={(el) => { return this.myCustomEl = el }} />

您正在返回 this. myCustomEl = el 的结果。在您的代码中，这并不是一个真正的问题——然而，当您不小心使用赋值(=)而不是比较器(= = 或 = = =)时，编程中最令人沮丧的错误之一就会发生，例如:

// This function will always return **true**, surprisingly
function isEqual(a, b) {
// The warning would be thrown here, because you probably meant to type "a===b". The below function will always return true;
return a=b;
}


let k=false;
let j=true;


if(isEqual(k,j)){
// You'll be very, very, very confused as to why this code is reached because you literally just set k to be false and j to be true, so they should be different, right? Right?
thisWillExecuteUnexpectedly();
}

在上述情况下，编译器警告是有意义的，因为 k=true的计算结果为 true (与 k===true相反，k===true可能就是您想要键入的) ，并导致意外行为。因此，当您返回一个赋值时，escue 会注意到，假设您想要返回一个比较，并让您知道您应该小心。

在您的示例中，您可以通过不返回结果来解决这个问题，这可以通过添加括号{}和不返回语句来完成:

<div ref={(el) => { this.myCustomEl = el }} />

您还可以像下面这样调整 es师警告: Https://eslint.org/docs/rules/no-return-assign

小开

我只是想提醒一下我发现的一些事。我已经安装了 Prettier，它不断地去掉我的括号，导致 eslint 错误: 为了证实这一点，我添加了一个更漂亮的“忽略”:

    <div>
{/*prettier-ignore*/}
<Map
ref={(m) => {
this.leafletMap = m;
}}
center={mapCenter}
zoom={zoomLevel}
>
<TileLayer
attribution={stamenTonerAttr}
url={stamenTonerTiles}
/>
</Map>
</div>
小开

如果我们没有应用 flowe 括号，Eslint 会给我们错误消息

错误:

const isNumeric = n => return !isNaN(parseFloat(n)) && isFinite(n)

解决方案:

const isNumeric = n => {
return !isNaN(parseFloat(n)) && isFinite(n)
}

提交答案