Utilizzo di puntelli reattivi nella funzione .map

Question

Diciamo che ho la seguente funzione di rendering su uno dei miei componenti. Dall'elemento padre ho passato una funzione prop changeTid.

principale:

<RequestsList data={this.state.data} changeTid={this.changeTid} /> 

Bambino:

(sto usando le classi ES6)

render() { 
var RequestNodes = this.props.data.map(function(request) { 
    return (
    <Request 
     key={request.TID} 
     changeTid={this.props.changeTid} 
    /> 
); 
}); 

    return (
     <div className="list-group">{RequestNodes}</div> 
    ); 
} 

non posso usare this.props.changeTid nella mia funzione mappa come this non sta facendo riferimento a ciò che non voglio. Dove lo leggo in modo da poter accedere al mio props?

Answer 1

È possibile impostare this per .map richiamata attraverso il secondo argomento

var RequestNodes = this.props.data.map(function(request) { 
    /// ... 
}, this); 

oppure è possibile utilizzare arrow function che non ha proprio this e this al suo interno si riferisce alla allegando contesto

var RequestNodes = this.props.data.map((request) => { 
     /// ... 
}); 

Answer 2

Se utilizzando ES6 è possibile utilizzare arrow functions che non associa il proprio this

var RequestNodes = this.props.data.map(request => { 
    return (
    <Request 
     key={request.TID} 
     changeTid={this.props.changeTid} 
    /> 
); 
});