React中带有es6类的关键道具

Key prop with es6 classes in React

本文关键字：es6 React      更新时间：2024-01-03

我正在React上运行一个关于pluralsight的教程（课程是不久前制作的），所以有些东西有点过时了，比如Babel。然而，我遇到了一些我不确定的事情。我在浏览器控制台中收到以下消息：

警告：数组或迭代器中的每个子级都应该有一个唯一的"key"道具。检查App的渲染方法

提前谢谢。

下面是我的应用程序组件：

import React from 'react';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      messages: [
        'hi there, how are you?',
        'I am fine, and you?'
      ]
    };
  }
  render() {
    var messageNodes = this.state.messages.map(message => {
      return (
        <div>{message}</div>
      );
    });
    return (
      <div>{messageNodes}</div>
    );
  }
}
export default App;

每个可重复项都需要（从提高性能的意义上来说需要）某种唯一的标识符。

在下面的情况下，您只需添加一个数组的索引作为关键字，但随着应用程序变得越来越大，您可能需要为这些消息提供某种id（可能来自数据库或类似的信息）。

import React from 'react';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      messages: [
        'hi there, how are you?',
        'I am fine, and you?'
      ]
    };
  }
  render() {
    var messageNodes = this.state.messages.map(message, index => {
      return (
        <div key={index}>{message}</div>
      );
    });
    return (
      <div>{messageNodes}</div>
    );
  }
}
export default App;

一个更大的例子可能是：

messages: [
    { id: 234, text: "Hi there, how are you?" }, 
]
相关文章：