当前位置: 首页 > 面试题库 >

在.map函数中使用react道具

金亦
2023-03-14
问题内容

假设我在其中一个组件上具有以下render函数。我从父元素传递了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


问题答案:

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

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

或者您可以使用没有自己的箭头功能this,并且this在其中指向封闭上下文

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


 类似资料:
  • 问题内容: 这是我之前的问题的后续工作,但是如果我在其中的映射如何在React的render()方法中调用函数。 示例(此代码在extended的类内): 无论我尝试什么,我总是最终得到“ this.getItemInfo()不是一个函数”。 我在函数内部进行了on操作,实际上是在引用Window对象,但是我似乎找不到改变它的方法。 我累了: 定义为函数getItemInfo(){..} 作为第二

  • 问题内容: 我正在尝试学习React,并且是Java的初学者。现在,我正在开发一个从Flickr的API提取数据的应用程序。问题是,当我尝试在Main.js组件中的props上使用map方法时,出现错误消息“ Uncaught TypeError:this.props.photos.map不是函数”。在此处在Stackoverflow上搜索后,我认为问题在于this.props是javascrip

  • 我对python非常陌生。 我研究了我的问题,但没有得到例外的答案。 我不明白的是,是如何被调用的,因为它没有像这样的参数,参数如何接受两个参数(苹果和香蕉)?

  • 问题内容: 注意:我在使用React Native时遇到了这个特定的问题,但是我想这也同样适用于React。 我有一个使用React.Component构建的React组件。我不需要设置状态,但是我有道具。我建议的语法如下: 我知道我可以使用函数来构造此组件,如下所示: 但是我更喜欢前者,因为我的组件会增长,可能会有状态等,我只想以相似的方式构建所有组件。 现在,我的linter抱怨拥有一个无用的

  • 我有一个相当复杂/嵌套的redux存储,如下所示: 在调度一个动作后,我需要根据ID将该动作插入到其中一个对象[]中。我目前正在使用以下脚本来更新减速器内的替换。但是,这会将数组更改为对象,因为对象2:{}的大括号。 我的渲染将在此之后中断,因为object2.map在更改为object后不再是函数。如何在不将其转换为对象的情况下解决此问题? 以下操作将失败,出现语法错误:

  • 问题内容: 我已经开始了一个项目,其中我在前端使用React JS,在后端使用node js。我使用webpack捆绑了JS文件。我将babel与其他必要的东西一起使用。当我在react类中使用箭头函数时,它会给出语法错误,例如: 模块构建失败:SyntaxError:意外令牌 但是我可以在节点中使用Arrow函数,没有任何问题。 这是我的webpack配置文件: 我的React文件: 如何解决这