我收到了警告Each child in an array or iterator should have a unique "key" prop. Check the render method of Login
我想传递一个元素数组回来,而不使用键。我必须相信有一个变通办法,而不添加一个毫无意义的 Package ?
注意return [<div/>, <div/>];
render () {
return (
<div className='login'>
{this.mobileWeb()}
{this.pcWeb()}
</div>
);
}
mobileWeb () {
if (this.state.isMobileWeb === true) {
return [
<div className='sky-container'></div>,
<div className='sea-container'></div>
];
}
}
pcWeb () {
if (this.state.isMobileWeb !== true) {
return [
<div className='sky-container'></div>,
<div className='sea-container'>
<LoginForm onChange={this.onChange} ref='loginForm' onEmailChange={this.onEmailChange} onPasswordChange={this.onPasswordChange} />
<input type='submit' value='Submit' onClick={this.login} />
</div>
];
}
}
5条答案
按热度按时间4c8rllxm1#
有一个不想使用键的有效用例,例如,如果你呈现了非常不同的树(想想博客文章),或者有一个函数总是返回相同的项目数组。
当您没有提供显式键时,React将使用索引作为键并发出警告--但是您可能希望隐藏警告,因为在这里使用索引是完全有效的。
然而,这似乎是不可能的,这会带来一个可悲的后果,即您要么无缘无故地使代码变得更复杂(添加无用的键),要么忽略警告(这意味着有效的警告可能会在噪音中丢失)。
yfwxisqw2#
到目前为止,可能从16.2.0(2017年11月28日)开始,您可以将元素 Package 在
<React.Fragment>
中,而不是数组中。子组件不需要键,但Fragment
的数组仍然需要键。ca1c2owp3#
你不应该传递没有键的子元素,React使用虚拟dom(它是轻量级的javascript对象)为diff使用键。永远不要将key用作Date.now()或Math.random(),因为在渲染过程中react将看到不同的键值,它将创建新的dom对象。
goucqfw64#
几年后,我会用新发现的知识回答:“无意义的 Package 器”实际上具有描述集合的语义含义,使用片段(例如
<> ... </>
)或 Package 器<div>
来描述它是非常正常的,只是不是数组。ax6ht2ek5#
编辑:不要这样做,正如@杰森米勒的评论所建议的那样。
只要简单明了,最好使用数组的索引或其他ID。但有时候,这是不切实际的,例如,当一个复杂的布局是动态生成时。一个消除警告的解决方案是使用
key={Math.random()}
生成一个随机数作为键。在返回的浮点数中有around 15 safe digits,因此有〉10^15个可能的结果。这对于大多数应用应该足够安全。