禁用/解决方法 React 关键要求?

IT技术 reactjs
2021-05-26 11:18:20

我收到警告 Each child in an array or iterator should have a unique "key" prop. Check the render method of Login

我想传递一个元素数组,而不使用键。我必须相信有一种解决方法,而无需添加毫无意义的包装器?

请注意 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>
      ];
    }
  }
4个回答

有一个不想使用键的有效用例,例如,如果您呈现强烈不同的树(想想博客文章)或有一个函数总是返回相同的项目数组。

当您不提供显式键时,React 将使用索引作为键并发出警告——但是您可能希望使警告静音,因为在此处使用索引是完全有效的。

然而,这似乎是不可能的,这会带来可悲的后果,即您必须无缘无故地使代码更复杂(添加无用的键)或忽略警告(这意味着有效警告可能会在噪音中丢失) .

截至目前,可能从 16.2.0(2017 年 11 月 28 日)开始,您可以将元素包裹在里面<React.Fragment>而不是数组。子组件不需要键,尽管Fragments数组仍然需要键。

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

几年后,我将用新发现的知识回答:“毫无意义的包装器”实际上具有描述集合的语义意义,使用片段 eg<> ... </>或包装器<div>来描述它是很正常的,而不是数组。