reactjs 禁用/变通方案是否响应关键要求?

wmvff8tz  于 2023-02-22  发布在  React
关注(0)|答案(5)|浏览(108)

我收到了警告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>
      ];
    }
  }
4c8rllxm

4c8rllxm1#

有一个不想使用键的有效用例,例如,如果你呈现了非常不同的树(想想博客文章),或者有一个函数总是返回相同的项目数组。
当您没有提供显式键时,React将使用索引作为键并发出警告--但是您可能希望隐藏警告,因为在这里使用索引是完全有效的。
然而,这似乎是不可能的,这会带来一个可悲的后果,即您要么无缘无故地使代码变得更复杂(添加无用的键),要么忽略警告(这意味着有效的警告可能会在噪音中丢失)。

yfwxisqw

yfwxisqw2#

到目前为止,可能从16.2.0(2017年11月28日)开始,您可以将元素 Package 在<React.Fragment>中,而不是数组中。子组件不需要键,但Fragment的数组仍然需要键。

ca1c2owp

ca1c2owp3#

你不应该传递没有键的子元素,React使用虚拟dom(它是轻量级的javascript对象)为diff使用键。永远不要将key用作Date.now()或Math.random(),因为在渲染过程中react将看到不同的键值,它将创建新的dom对象。

goucqfw6

goucqfw64#

几年后,我会用新发现的知识回答:“无意义的 Package 器”实际上具有描述集合的语义含义,使用片段(例如<> ... </>)或 Package 器<div>来描述它是非常正常的,只是不是数组。

ax6ht2ek

ax6ht2ek5#

编辑:不要这样做,正如@杰森米勒的评论所建议的那样。
只要简单明了,最好使用数组的索引或其他ID。但有时候,这是不切实际的,例如,当一个复杂的布局是动态生成时。一个消除警告的解决方案是使用key={Math.random()}生成一个随机数作为键。在返回的浮点数中有around 15 safe digits,因此有〉10^15个可能的结果。这对于大多数应用应该足够安全。

相关问题