ReactJS - Keys

在使用动态创建的组件或用户更改列表时，

React 键非常有用.设置键值将使您的组件在更改后唯一标识.

使用键

让我们动态创建内容具有唯一索引(i)的元素. map 函数将从 data 数组中创建三个元素.由于键值对于每个元素都必须是唯一的，因此我们将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'));

我们将得到以下每个元素的Key值的结果.

如果我们将来添加或删除某些元素或更改动态创建的元素的顺序，React将使用键值用于跟踪每个元素.