在 .map 函数中使用 react props

IT技术 javascript reactjs ecmascript-6
2021-04-14 18:33:33

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

2个回答

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

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}
    />
  );
});
其它你可能感兴趣的问题
上一篇在两个兄弟 React.js 组件之间传递数据 下一篇如何在 React 中使用/包含第三方库？