尝试将 ReactCSSTransitionGroup 导入反应应用程序时收到有关唯一“键”的警告

Question

我希望有人能对这个问题有所了解。经过多次尝试，我能够正确地将 ReactCSSTransitionGroup 导入我的反应应用程序。现在我收到以下警告，并且我的转换不起作用。

警告：数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

我用 ReactCSSTransitionGroup 元素将我的组件包装在主 App.js 文件中。

return (
  <div className="container">
    <Navigation />
        <div className="app-items-container">
            {
            this.state.notes.map((note) => {
                return(
                    <ReactCSSTransitionGroup {...transitionOptions}>
                        <Note noteContent={note.noteContent} 
                        noteId={note.id} 
                        key={note.id} 
                        removeNote={this.removeNote} />
                    </ReactCSSTransitionGroup>
                    )
                })
            }
        </div>
    <Form addNote={this.addNote} />
  </div>
);

我的组件已经有一个密钥传递给它。我应该在哪里应用密钥？

Answer 1

您很可能也应该在<ReactCSSTransitionGroup > 上添加一个唯一键，您可以尝试以下方法吗？

return (
<div className="container">
    <Navigation />
        <div className="app-items-container">
            {
            this.state.notes.map((i, note) => {
                return(
                    <ReactCSSTransitionGroup key={i} {...transitionOptions}>
                        <Note noteContent={note.noteContent} 
                        noteId={note.id} 
                        key={note.id} 
                        removeNote={this.removeNote} />
                    </ReactCSSTransitionGroup>
                    )
                })
            }
        </div>
    <Form addNote={this.addNote} />
  </div>
);

另外，micposso 说的很有道理，所以如果你能确保 node.id 确实总是唯一的，那就太好了。

Answer 2

我认为您不希望在 .map 函数中使用 ReactCSSTransitionGroup。它应该在外面，并且 ReactCSSTransitionGroup 会将它的魔力添加到它的每个子项（您的 Note 组件）中。

它的工作原理是在从 DOM 中添加/删除时向它的“每个”子项添加额外的生命周期方法。所以没有必要用 ReactCSSTransitionGroup 包装每个 Note 组件，它应该简单地将所有 Notes 作为它的子组件。

关键警告是因为 ReactCSSTransitionGroup 会将其子项包装在一个跨度中。在 .map 循环中，react 会看到如下内容：

<span> <Note key={note.id} /> </span>
<span> <Note key={note.id} /> </span>
<span> <Note key={note.id} /> </span>

React 会希望每个 span 有一个唯一的键，子 Note 键将被忽略。

将它移到地图外会给你这个：

<span> 
    <Note key={note.id} />
    <Note key={note.id} />
    <Note key={note.id} />
</span>

React 会很高兴，因为每个 Note 都有一个键。

尝试以下方法：

return (
  <div className="container">
    <Navigation />
        <div className="app-items-container">
           <ReactCSSTransitionGroup {...transitionOptions}>
             {this.state.notes.map((note) => {
                return(
                        <Note noteContent={note.noteContent} 
                        noteId={note.id} 
                        key={note.id} 
                        removeNote={this.removeNote} />
                    )
                })
              }
            </ReactCSSTransitionGroup>
        </div>
    <Form addNote={this.addNote} />
  </div>
);