我有一个呈现标签的组件。它循环遍历地图并显示数据。我尝试使用 forEach 但它不起作用。但是,如果我将映射转换为数组,它就可以工作(foreach 也不适用于数组)。我在这里缺少什么?
这有效:
render(){
return(
<div class="container">
{Array.from(this.props.tags.values()).map((tag,i) => (
<Tag
handleKeyDown={this.handleKeyDown.bind(this)}
handleBlur={this.handleBlur.bind(this)}
handleTouchTap={this.handleTouchTap.bind(this)}
handleRequestDelete={this.handleRequestDelete.bind(this)}
tag={tag}
key={i}
/>
))}
</div>
)
}
这不会:
render(){
return(
<div class="container">
{this.props.tags.forEach((tag,i) => (
<Tag
handleKeyDown={this.handleKeyDown.bind(this)}
handleBlur={this.handleBlur.bind(this)}
handleTouchTap={this.handleTouchTap.bind(this)}
handleRequestDelete={this.handleRequestDelete.bind(this)}
tag={tag}
key={i}
/>
))}
</div>
)
}
Map#forEach
不返回新数组。它们的工作方式完全符合您的预期,这是为了Array#map
构建一个从旧数组映射的新数组。React.createElement
需要将其子级作为参数列表或数组。一般来说,您想要考虑您的Map
更像是一个平原Object
而不是作为数组,即如果您想单独管理其值,则将其转换为数组。
Your Array.from
使用是一个很好的方法。这就是我通常使用的方式Map
s。如果你想真正现代化,并避免其中一次迭代(尽管我只能想象这对于最极端的情况来说很重要),你总是可以将迭代器函数应用于 Map 的值,然后在其上展开迭代器。
render() {
const asTags = function* () {
for (const [key, tag] of this.props.tags) {
yield <Tag tag={tag} key={key} />;
}
};
return (
<div class="container">
{[...asTags()]}
</div>
);
}
生成器函数是一个简单的迭代器,它yield
s 它在地图中循环遍历的每个条目。我只使用其中的数组,因为我不完全确定如何在 JSX 中传播参数(我不使用 JSX 的原因之一)。如果你有React.createElement
导入为ce
,你可以简单地说ce('div', { class: 'container' }, ...asTags())
相反,在渲染中。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)