Question

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

Answer 1

例如，如果您不想使用密钥，则有一个有效的用例。呈现差异很大的树（想想博客文章）或具有始终返回相同项目数组的函数。

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

但是，这似乎是不可能的，这带来的不幸结果是，您要么无缘无故地使代码变得更加复杂（添加无用的键），要么忽略警告（这意味着有效的警告可能会丢失）噪音）。

Answer 2

你不应该在没有键的情况下传递子元素，React使用虚拟dom的diff diff键（它是轻量级的javascript对象）。永远不要使用key作为Date.now（）或Math.random（），因为在渲染期间，react将看到不同的键值，它将创建新的dom对象。

Answer 3

截至目前，大概从16.2.0（2017年11月28日）开始，您可以将元素包装在<React.Fragment>中而不是数组中。子组件不需要键，尽管Fragment数组仍将需要键。

Answer 4

几年后，我将用新发现的知识来回答：“无意义的包装器”实际上具有集合的语义含义，尽管可以仅使用诸如<> ... </>之类的片段，但最终变得很难读取DOM或整个代码库中的状态。

每个返回都应返回一个包装器<div>，可以选择使用StyledComponent或常规类名对其进行描述

禁用/解决方法React密钥要求？

4 个答案: