ReactJS RouterReactJS Refs
ReactJS Keys
keys当使用动态创建的组件或用户更改列表时，React很有用。设置key值将使更改后的组件保持唯一标识。
使用Keys
让我们动态创建具有唯一索引(i)的Content元素。 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将使用这些key值来跟踪每个元素。
ReactJS RouterReactJS Refs