[英]React 16 iterating over map rendering key
我试图遍历Immutable.js映射以渲染组件,但是尽管正在渲染,但它也在渲染页面的键。 我不知道为什么。
render() {
const myMap = new Map({foo: '', bar: 'http://google.com/'})
const {showFoo, titleAndUrl} = this.props
return (
<ul style={[
styles.container,
showFoo && styles.container.inline,
]}>
{myMap.map((title, url) => this.renderTab(url, title))}
</ul>
)
}
renderTab(title, url) {
const {showFoo, isFoo} = this.props
return (
<li key="sb" style={[
styles.listItem,
showFoo && styles.listItem.inline,
]}>
<a
href={url}
key={title}
style={[
styles.link,
styles.activeLink,
showFoo && styles.link.inline,
]}
className={isFoo ? "style" : ''}>
{title}
</a>
</li>
)
}
}
正确渲染了两个名称和url,但是渲染了重复的键,即foo渲染了两次,bar也渲染了两次,但是foo和bar键之一没有样式,这表明它是在this.renderTab
之外渲染的。
呈现的HTML:
<ul data-radium="true"
style="display: flex; align-items: center; padding: 0px; margin: 0px; list-style: none; width: 100%; border-top: 1px solid rgb(221, 221, 221); height: 48px;">
foo
<li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a href=""
class=""
data-radium="true"
style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">foo</a>
</li>
bar
<li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a
href="http://google.com" class="" data-radium="true"
style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">bar</a>
</li>
</ul>
您混合了参数的顺序,将title
分配给url
,反之亦然。
另外,传递给Immutable.Map.map的回调函数的参数是(1)值,(2)键,因此fist参数是您的URL,第二个参数是您的标题。
更改行与调用map
像这样:
{myMap.map((url, title) => this.renderTab(title, url))}
另一个问题是,您要呈现的列表项元素都具有相同的键“ sb”,只有“ a”元素的键会更改,但这甚至不是必需的。
将renderTab
返回的JSX更改为此:
<li key={title} style={[
styles.listItem,
showFoo && styles.listItem.inline,
]}>
<a
href={url}
style={[
styles.link,
styles.activeLink,
showFoo && styles.link.inline,
]}
className={isFoo ? "style" : ''}>
{title}
</a>
</li>
最后,主要的错误是您期望Immutable.Map.map
返回一个数组,但并非如此,它返回另一个不可变的映射,因此您必须使用valueSeq和toArray将map函数返回的值转换为数组。
因此,您的map语句实际上应如下所示:
{myMap.map((url, title) => this.renderTab(title, url)).valueSeq().toArray()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.