ReactJS鍵(Key)

在使用動態建立的元件或使用者更改列表時，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將使用鍵值來跟蹤每個元素。