La solución:

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

La explicación:

Su código actual es equivalente a:

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

Está devolviendo el resultado de this.myCustomEl = el. En su código, esto no es realmente un problema; sin embargo, uno de los errores más frustrantes en la programación ocurre cuando accidentalmente usa una asignación (=) en lugar de un comparador (== o ===), por ejemplo:

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

En el caso anterior, la advertencia del compilador tiene sentido porque k=true se evalúa como verdadero (a diferencia de k===true , que es probablemente lo que quería escribir) y provoca un comportamiento no deseado. Por lo tanto, eshint se da cuenta cuando devuelve una tarea, asume que tenía la intención de devolver una comparación y le informa que debe tener cuidado.

En su caso, puede resolver esto simplemente no devolviendo el resultado, lo que se hace agregando corchetes {} y sin declaración de devolución:

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

También puede ajustar la advertencia de eshint así: https://eslint.org/docs/rules/no-return-assign

Estás devolviendo implícitamente una tarea. this.myCustomEl = el es una asignación. Puede corregir este error de pelusa cambiando su función de flecha a (el) => { this.myCustomEl =el } que ya no regresa implícitamente porque lo envolvió en {} en lugar de () .

Nota al margen: Declarar una función de flecha en línea dentro de un método de renderizado romperá un PureComponent porque cada vez que su componente se renderiza tiene que declarar una nueva función anónima, por lo que la comparación superficial de accesorios que hace un PureComponent se rompe por esto y siempre se volverá a renderizar .

Intente hacer de eso un método de su componente.

 class MyClass extends React.PureComponent { getRef = (el) => { this.ref = el; } render() { return <div ref={this.getRef} />; } }

Si la sintaxis anterior no funciona para usted, puede usar lo siguiente:

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

Solo quería señalar algo que encontré. Tengo instalado Prettier y seguía quitándome los paréntesis, lo que resultó en un error de eslint: para confirmar esto, agregué un prettier-ignore:

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