使用React制作二级导航

//let中定义导航内容
import React from 'react';
let nav = [
    {
        name: '百度',
        link: 'http://www.baidu.com',
        children: [
            { names: '体育' },
            { names: '娱乐' },
        ]
    },
    {
        name: '腾讯',
        link: 'http://www.qq.com',
        children: [
            { names: '体育' },
            { names: '娱乐' },
        ]
    }
]
export class Nav extends React.Component {
    constructor() {
        super();
        this.state = {
            isShown: false, lindex: -1
        }
    }
    stateTrue(i) {
        this.setState({ isShow: true, lindex: i })
    }
    render() {
        return (
            <div className='nav'>
                <ul>
                    {
                        nav && nav.map((value, index) => {
                            return (
                                <li onMouseOver={this.stateTrue.bind(this, index)} key={index}>
                                    <a href={value.link}> {value.name}</a>
                                    {
                                        this.state.isShow && this.state.lindex == index && <ul>
                                            {
                                                value.children && value.children.map((v, i) => {
                                                    return (
                                                        <li key={i}>{v.names}</li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    }
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}