react key值警告问题

没有warning

第一种情况

  1. function(name,index)
  2. return div标签带有属性key=
//Component1.jsx
import React from 'react';


var names = ['Alice', 'Emily', 'Kate'];

class Component1 extends React.Component {
    render() {
        return (
            <div>
            {
                names.map(function(name,index){
                   return <div key={index}>Hello, {name}!</div>
                })
            }
            </div>
        )
    }
}

//导出组件
export default Component1;

第二种情况

//Component1.jsx
import React from 'react';


var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome!</h2>,
];

class Component1 extends React.Component {
    render() {
        return (
            <div>
            {
                arr.map(function(ele,index){
                   return <div key={index}>{ele}</div>
                })
            }
            </div>
        )
    }
}

//导出组件
export default Component1;
posted @ 2017-04-07 16:22  sakura-sakura  阅读(600)  评论(1编辑  收藏  举报