¿Por qué los accesorios JSX no deberían usar funciones de flecha o enlazar?
Estoy ejecutando lint con mi aplicación React, y recibo este error:
error JSX props should not use arrow functions react/jsx-no-bind
Y aquí es donde estoy ejecutando la función de flecha (dentroonClick
):
{this.state.photos.map(tile => (
<span key={tile.img}>
<Checkbox
defaultChecked={tile.checked}
onCheck={() => this.selectPicture(tile)}
style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
/>
<GridTile
title={tile.title}
subtitle={<span>by <b>{tile.author}</b></span>}
actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
>
<img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
</GridTile>
</span>
))}
¿Es esta una mala práctica que debe evitarse? ¿Y cuál es la mejor manera de hacerlo?