0

我希望有人可以对这个问题有所了解。经过多次尝试，我能够正确地将 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>
);

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

4

2 回答 2

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>

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>
);
于 2017-12-26T21:42:58.180 回答
0

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

于 2017-12-26T21:28:32.133 回答