在.map函数中使用react props [重复]答案

【问题标题】：Using react props in .map function [duplicate]在.map函数中使用react props [重复]
【发布时间】：2016-09-06 10:39:21
【问题描述】：

假设我的一个组件上有以下渲染功能。从父元素我传递了一个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？

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

你可以通过第二个参数为.map回调设置this

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

或者你可以使用没有自己的this的arrow function，其中this指的是封闭上下文

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

【讨论】：

【解决方案2】：

如果您使用的是 ES6，则可以使用 arrow functions，它不会绑定自己的 this

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

【讨论】：