在.map函数中使用react props

Question

假设我的一个组件上有以下渲染功能.从父元素我传递了一个changeTidprop函数.

家长:

<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);

或者你可以使用没有自己的箭头功能this,this里面指的是封闭的上下文

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

Answer 2

如果您使用 ES6，您可以使用不绑定自己的箭头函数this

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