Question

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

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

Answer 1

修复：

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

说明：

您当前的代码相当于：

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

您将返回this.myCustomEl = el的结果。在你的代码中，这不是一个真正的问题 - 然而，编程中最令人沮丧的错误之一发生在你不小心使用赋值（=）而不是比较器（==或===）时，例如：

let k=false;  
if(k=true){
  thisWillExecute();
}

在上面的例子中，编译器警告是有意义的，因为k=true的计算结果为true（而不是k===true，这可能是你打算键入的）并导致意外的行为。因此，eshint会在您返回作业时发出通知，假设您打算返回比较，并告诉您应该小心。

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

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

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

Answer 2

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

旁注：在渲染方法内部声明一个内联的箭头函数会破坏PureComponent，因为每次你的组件呈现它都必须声明一个新的匿名函数，所以浅道具比较<{1}}所做的事情被此打破，并且将始终重新呈现。

尝试制作组件的方法。

PureComponent

如果上述语法不适合您，您可以使用以下内容：

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

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

Answer 3

只想记录一下我遇到的事情。我已经安装了Prettier，并且它不断带走我的父母，导致出现eslint错误：为了确认这一点，我添加了一个更漂亮的忽略：

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

箭头功能不应该返回赋值？

3 个答案: