在使用动态创建的组件或用户更改列表时，react键很有用。 设置键值将会保持组件在更改后的唯一标识。

使用键

这里将动态创建具有唯一索引(i)的内容元素。 map函数将从数据数组中创建三个元素。 由于键值对于每个元素都是唯一的，因此把i作为每个创建元素的键。

文件：app.jsx -

import react from 'react';

class app extends react.component {
   constructor() {
      super();

      this.state = {
         data:[
            {
               component: 'first...',
               id: 1
            },
            {
               component: 'second...',
               id: 2
            },
            {
               component: 'third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamiccomponent, i) => <content 
                  key = {i} componentdata = {dynamiccomponent}/>)}
            </div>
         </div>
      );
   }
}
class content extends react.component {
   render() {
      return (
         <div>
            <div>{this.props.componentdata.component}</div>
            <div>{this.props.componentdata.id}</div>
         </div>
      );
   }
}
export default app;

文件：main.js -

import react from 'react';
import reactdom from 'react-dom';
import app from './app.jsx';

reactdom.render(<app/>, document.getelementbyid('app'));

将得到每个元素的键值，如下所示 -

如果在将来添加或删除一些元素或者改变动态创建元素的顺序，react将使用键值来跟踪每个元素。