ReactJS 菜鳥教程
ReactJS Keys
keys當(dāng)使用動(dòng)態(tài)創(chuàng)建的組件或用戶更改列表時(shí)，React很有用。設(shè)置key值將使更改后的組件保持唯一標(biāo)識(shí)。
使用Keys
讓我們動(dòng)態(tài)創(chuàng)建具有唯一索引(i)的Content元素。 map函數(shù)將從數(shù)據(jù)數(shù)組中創(chuàng)建三個(gè)元素。 由于鍵值對(duì)于每個(gè)元素都必須是唯一的，因此我們將為每個(gè)創(chuàng)建的元素分配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'));對(duì)于每個(gè)元素的鍵值，我們將獲得以下結(jié)果。
如果我們將來增加或刪除一些元素或更改動(dòng)態(tài)創(chuàng)建的元素的順序，React將使用這些key值來跟蹤每個(gè)元素。