react key的问题

想要封装一个树菜单，里面需要递归，但是key报错了
1、menu.js

import React from "react";
import Item from "./components/Item";

class Menu extends React.Component{

    render(){
        const data = this.props.data;
        return (
            <ul>
                {data.map((item, index) => {
                    let $item = <Item
                        key={item.id}
                        {...item}
                        index={index}
                    />;

                    if(item.children){
                        return <li>
                            {$item}
                            <Menu data={item.children}/>
                        </li>
                    }else{
                        return <li>
                            {$item}
                        </li>
                    }
                })}
            </ul>
        );
    }
}

Menu.propTypes = {
    data: React.PropTypes.array,
    outlook: React.PropTypes.bool,
    activeId: React.PropTypes.string
};

Menu.defaultProps = {
    data: [],
    outlook: true
};

export default Menu;

2、Item.js

import React from "react";

class Item extends React.Component{
    render(){
        let name = this.props.name;
        return (
            <a href="#">{name}</a>
        );
    };
}

export default Item;

3、index.js

import Menu from "./menu";
import React from "react";
import { render } from "react-dom";

const data = [
    {
        name: "一级菜单1",
        id: 1,
        children: [
            {
                name: "二级菜单1",
                id: 11,
                children: [
                    {
                        name: "三级菜单1",
                        id: 111
                    }
                ]
            },
            {
                name: "二级菜单2",
                id: 12
            }
        ]
    },
    {
        name: "一级菜单2",
        id: 2
    }
];

render(
    <Menu data={data}/>,
    document.getElementById('demo')
);

4、然后控制台报错了

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Menu`. See https://fb.me/react-warning-keys for more information.

我是想里面有递归到Menu，但是这个Menu的key要怎么用？？？

---

key应该放在组件身上，大概是循环里直接是组件。但是你代码写的是循环的时候组件外层套了li，错误应该是这个。刚学不是特别清楚。

---

如 @G_Koala_C 所说，改成

...
class Menu extends React.Component{

    render(){
        const data = this.props.data;
        return (
            <ul>
                {data.map((item, index) => {
                    let $item = <Item
                        {...item}
                        index={index}
                    />;

                    if(item.children){
                        return <li key={item.id}>
                            {$item}
                            <Menu data={item.children}/>
                        </li>
                    }else{
                        return <li key={item.id}>
                            {$item}
                        </li>
                    }
                })}
            </ul>
        );
    }
}
...

---

我想你最应该参考的是这一章：dynamic-children