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

您可以通过第二个参数

为.map回调设置this

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

或者您可以使用没有this的{{3}}，其中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}
    />
  );
});

在.map函数中使用react props

2 个答案: