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

【问题标题】：Arrow function should not return assignment?箭头函数不应该返回赋值吗？
【发布时间】：2018-07-02 22:57:13
【问题描述】：

我的代码在应用程序中正常运行，但是我的 eslint 不喜欢它，并说我不应该返回分配。这有什么问题？

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

【问题讨论】：

在其周围添加{ }
这是一个警告，试试<div ref={(el) => (this.myCustomEl = el)} />
同样的警告。虽然这是一个警告，但我无法通过带有警告的测试
<div ref={(el) => { this.myCustomEl = e}l} />
@epascarello 打错了 e}l ?

标签： javascript reactjs eslint

【解决方案1】：

解决方法：

<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 不同，这可能是您要键入的内容）并导致意外行为。因此，当您返回一个赋值时，eshint 会发出通知，假定您打算返回一个比较结果，并让您知道您应该小心。

在你的情况下，你可以通过简单地不返回结果来解决这个问题，这是通过添加括号 {} 并且没有返回语句来完成的：

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

您还可以像这样调整 eshint 警告： https://eslint.org/docs/rules/no-return-assign

【讨论】：

【解决方案2】：

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

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

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

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} />;
    }
}

【讨论】：

仅供参考，此错误 w“无法读取未定义的属性 'appendChild'”
你可以在code sandbox example看到它的工作原理。

【解决方案3】：

只是想说明我遇到的一些事情。我安装了 Prettier，它一直在拿走我的括号，导致 eslint 错误：为了确认这一点，我添加了一个更漂亮的忽略：

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

【讨论】：