在React中使用map()传递其他参数
在React中使用map()传递其他参数
提问于 2016-08-28 08:21:06
我目前正在对一个道具进行映射，如下所示：
renderList(item) {
return(
</div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList)}
</div>
);
}
}我还有另一个道具想通过
this.props.completed我想要做的事情的简化版本
renderList(item, completed) {
return(
</div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList(this.props.items, this.props.completed)}
</div>
);
}
}是否可以使用此map函数传递另一个道具？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-28 09:05:31
有(至少)3种方法可以做到这一点。最简单的方法是将renderList绑定到组件实例并在其中引用this.props.completed：
constructor (props) {
super(props);
// it's more efficient to bind your functions once in the constructor than
// doing so on every render
this.renderList = this.renderList.bind(this);
}
renderList(item) {
const completed = this.props.completed;
return(
<div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList)}
</div>
);
}另一种选择是使用闭包将属性传递给函数：
renderList(completed, item) {
return(
<div>
shows up
</div>
)
}
render() {
const completed = this.props.completed;
const renderList = this.renderList;
return(
<div>
{this.props.items.map(function (item) {
return renderList(completed, item);
})}
</div>
);
}第三种选择是将属性绑定到map()回调。
renderList(completed, item) {
return(
<div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList.bind(this, this.props.completed))}
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39186942
复制相关文章
相似问题
腾讯云开发者
