关于javascript：在.map函数中使用react props

Using react props in .map function

本问题已经有最佳答案，请猛点这里访问。

假设我在一个组件上有以下渲染函数。从父元素中，我传递了一个changeTidprop函数。

起源：

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

孩子：

(我正在使用ES6课程)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

return (
{RequestNodes}
);
}

我不能在地图功能中使用this.props.changeTid，因为this没有引用我想引用的内容。我应该在哪里绑定它，以便访问我的props？

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

1
2
3

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

或者您可以使用没有自己的this的arrow函数，其中this表示封闭上下文。

1
2
3

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

如果使用ES6，则可以使用不绑定其自身this的arrow函数。

1
2
3
4
5
6
7
8

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