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 的对应来指定相应的元素。