# src/menu/MenuItem.js File

    import React,{PropTypes} from 'react';
    import Component from '../utils/Component';
    import classnames from 'classnames';
    import {setPhoenixPrefix} from '../utils/Tool';

    import Icon from '../Icon';

    /**
     * 菜单导航列表项组件<br/>
     * - 可通过phIcon设置菜单项名称前符号的类型，具体可以参考[gfs-icons](https://future-team.github.io/gfs-icons/index.html)。
     * - 可通过href设置菜单项的跳转地址，可不设置，自定义回调函数onMenuitemChange。
     * - 可通过name设置菜单项的唯一标识，对应MenuList的activeName。
     * - 通过onMenuitemChange设置点击菜单项时的回调。
     *
     * 主要属性和接口：
     * - phIcon:菜单项名称前符号的类型，不设置时默认没有符号。
     * - href:菜单项的跳转地址，默认null。
     * - name:菜单项的唯一标识。
     * - onMenuitemChange:点击菜单项时的回调。<br/>
     * 如：
     * ```code
     *     <Menu>
     *         <Menu.Header>
     *             标题一
     *         </Menu.Header>
     *         <Menu.Body>
     *             <Menu.Nav>
     *                  <Menu.List activeName={this.state.activeName} onMenulistChange={(name)=>{this.setState({activeName:name})}}>
     *                      <Menu.Item name="home" href="#index" phIcon="home" onMenuitemChange={(name)=>{console.log(name);}}>首页</Menu.Item>
     *                  </Menu.List>
     *              </Menu.Nav>
     *         </Menu.Body>
     *     </Menu>
     * ```
     *
     * @class MenuItem
     * @module 菜单组件
     * @extends Component
     * @constructor
     * @since 1.4.0
     * @demo menu|menu.js {展示}
     * @show true
     * */
    export default class MenuItem extends Component {
        constructor(props, context){
            super(props, context);
        }

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'menu-item'
             * */
            classPrefix: PropTypes.string,
            /**
             * icon符号类型
             * @property phIcon
             * @type string
             * @default ''
             **/
            phIcon:PropTypes.string,
            /**
             * 跳转地址
             * @property href
             * @type string
             * @default ''
             **/
            href:PropTypes.string,
             /**
             * 当前项目的唯一标志
             * @property name
             * @type String
             * @default null
             * */
            name: PropTypes.string,
            /**
             * 点击事件的回调函数
             * @method onMenuitemChange
             * @type Function
             * @default null
             * */
            onMenuitemChange: PropTypes.func
        };

        static defaultProps = {
            name: null,
            href: 'javascript:;',
            classPrefix:'menu-item',
            classMapping : {}
        };

        isActive(){
            let {name, activeName} = this.props;
            return name === activeName ? 'active':'';
        }

        onMenuitemChange(){
            this.props.changeActive(this.props.name);
            if(this.props.onMenuitemChange) this.props.onMenuitemChange(this.props.name);
        }

        renderIcon(){
            let {phIcon} = this.props;

            if(phIcon){
                return <Icon phIcon={phIcon} />;
            }else{
                return '';
            }
        }

        render(){
            let {className, href, children} = this.props;

            return (
                <li {...this.props} className={classnames(
                        this.getProperty(true),
                        this.isActive(),
                        className
                    )}
                >
                    <a href={href} onClick={::this.onMenuitemChange}>
                        {this.renderIcon()}
                        {children}
                    </a>
                </li>
            );
        }
    };