Использование реакции реквизита в функции .map

Question

Предположим, у меня есть следующая функция рендеринга на одном из моих компонентов. Из родительского элемента я передал функцию оповещения changeTid.

Родитель:

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

ребенка:

(я использую классы 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> 
    ); 
} 

Я не могу использовать this.props.changeTid в моей функции карты, так как this не ссылается на то, что я не хочу. Где я могу привязать его, чтобы я мог получить доступ к моему props?

Answer 1

Вы можете установить this для .map обратного вызова через второй аргумент

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

или вы можете использовать arrow function, который не имеет собственного this и this внутри него относится к ограждающих контекст

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

Answer 2

Если вы При использовании ES6 вы можете использовать arrow functions, который не связывает его this

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