React教程15：Keys

 

React中的 keys 在处理动态创建components和你的lists需要被用户改变时候十分有用。设置 key 的值会让你的components在变化后能被独特的识别。

使用Keys

这里我们用特殊的index (i)来动态地创建 Content 。  map 功能可以从data array中创建3个元素。因为元素的 key 的value不能是重复的，我们用 i 作为每个被创建元素对应的key。

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

我们会得到下面效果。每个元素对应的Key value。



当我们以后需要添加或删除某些元素或者改变元素顺序时候, React 通过 key 的对应来指定相应的元素。