我目前正在像这样映射一个 Prop :
renderList(item) {
return(
</div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList)}
</div>
);
}
}
我还有一个 Prop 要传递
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 功能传递另一个 Prop ?
最佳答案
(至少)有 3 种方法可以解决这个问题。最简单的方法是将 renderList
绑定(bind)到您的组件实例并在其中引用 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>
);
}
第三种选择是将属性绑定(bind)到 map()
回调。
renderList(completed, item) {
return(
<div>
shows up
</div>
)
}
render() {
return(
<div>
{this.props.items.map(this.renderList.bind(this, this.props.completed))}
</div>
);
}
关于javascript - 在 React 中使用 map() 传递附加参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39186942/