在.map函数中使用react道具

Using react props in .map function

本文关键字：react 道具 map 函数      更新时间：2023-09-26

假设我的一个组件上有以下呈现函数。从父元素中，我传递了一个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？

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

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

或者您可以使用没有自己的this的箭头函数，其中的this指的是封闭上下文

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

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

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