ReactCSSTransitionGroup唯一键错误

Question

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

警告：数组或迭代器中的每个子节点都应该具有唯一的“键”支柱。

我使用像这样的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

我认为您不希望在.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会希望每个跨区都有一个唯一的密钥，子Note键会被忽略。

将它移到地图之外会给你这样的：

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

每个Note都有一把钥匙，React会很开心。

请尝试以下方法：

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>
);

Answer 2

你很可能也应该在<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确实总是唯一的，那就太好了。