Javascript 箭头函数不应该返回赋值吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48413299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Arrow function should not return assignment?
提问by AnnaSm
My code is working correctly in the app however, my eslint isn't liking it and is saying I should not return assignment. What is wrong with this?
我的代码在应用程序中正常工作，但是，我的 eslint 不喜欢它，并说我不应该返回分配。这有什么问题？
<div ref={(el) => this.myCustomEl = el} />
回答by Aidan Hoolachan
The Fix:
修复：
<div ref={(el) => { this.myCustomEl = el }} />
The Explanation:
说明：
Your current code is equivalent to:
您当前的代码相当于：
<div ref={(el) => { return this.myCustomEl = el }} />
You are returning the result of this.myCustomEl = el. In your code, this is not really a problem -- however, one of the most frustrating bugs in programming occurs when you accidentally use an assignment (=) instead of a comparator (== or ===), for instance:
您正在返回 this.myCustomEl = el 的结果。在您的代码中，这并不是真正的问题——但是，当您不小心使用赋值 (=) 而不是比较器（== 或 ===）时，会发生编程中最令人沮丧的错误之一，例如：
let k=false;
if(k=true){
thisWillExecute();
}
In the above case, the compiler warning makes sense because k=trueevaluates to true (as opposed to k===true, which is probably what you meant to type) and causes unintended behavior. Thus, eshint notices when you return an assignment, assumes that you meant to return a comparison, and lets you know that you should be careful.
在上述情况下，编译器警告是有道理的，因为k=true计算结果为 true（而不是k===true，这可能是您要键入的内容）并导致意外行为。因此，当你返回一个赋值时，eshint 会通知，假设你打算返回一个比较，并让你知道你应该小心。
In your case, you can solve this by simply not returning the result, which is done by adding enclosing brackets {} and no return statement:
在您的情况下，您可以通过简单地不返回结果来解决此问题，这是通过添加括号 {} 和不返回语句来完成的：
<div ref={(el) => { this.myCustomEl = el }} />
You can also adjust the eshint warning like so: https://eslint.org/docs/rules/no-return-assign
您还可以像这样调整 eshint 警告：https://eslint.org/docs/rules/no-return-assign
回答by Kyle Richardson
You're implicitly returning an assignment. this.myCustomEl = elis an assignment. You could fix this linting error by changing your arrow function to (el) => { this.myCustomEl =el }which is no longer implicitly returning because you wrapped it in {}instead of ().
你隐含地返回了一个任务。this.myCustomEl = el是一个任务。您可以通过将箭头函数更改(el) => { this.myCustomEl =el }为不再隐式返回来修复此 linting 错误，因为您将其包裹在{}而不是().
Side note: Declaring an arrow function inline inside a render method will break a PureComponentbecause every time your component renders it has to declare a new anonymous function, so the shallow props comparison that a PureComponentdoes is broken by this and will always re-render.
旁注：在渲染方法中声明一个内联箭头函数会破坏 a，PureComponent因为每次你的组件渲染它都必须声明一个新的匿名函数，所以 aPureComponent所做的浅层道具比较会被这个破坏，并且总是会重新渲染。
Try making that a method of your component.
尝试将其作为组件的方法。
class MyClass extends React.PureComponent {
getRef = (el) => { this.ref = el; }
render() {
return <div ref={this.getRef} />;
}
}
If the above syntax doesn't work for you, you can use the following:
如果上述语法对您不起作用，您可以使用以下内容：
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} />;
}
}
回答by Chris Adams
Just wanted to note something I came across. I have Prettier installed and it kept taking away my parens, resulting in eslint error: To confirm this I added a prettier-ignore:
只是想记下我遇到的一些事情。我安装了 Prettier 并且它一直带走我的括号，导致 eslint 错误：为了确认这一点，我添加了一个更漂亮的忽略：
<div>
{/*prettier-ignore*/}
<Map
ref={(m) => {
this.leafletMap = m;
}}
center={mapCenter}
zoom={zoomLevel}
>
<TileLayer
attribution={stamenTonerAttr}
url={stamenTonerTiles}
/>
</Map>
</div>
