react-admin-lte/lib/UserAvatarMenu.js

简单封装的 AdminLTE react 类库，并包含一个编译配置。

import React from 'react';

export default class UserAvatarMenu extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.logout = this.logout.bind(this);
  }

  logout() {
    if (this.props.cookie) {
      this.props.cookie.remove("ticket");
    }
    if (this.props.onLogout) {
      this.props.onLogout();
    }
    window.location = "/";
  }

  render() {
    let nick = this.props.nick || "匿名";
    let avatar = this.props.avatar || "http://www.maczapp.com/uploads/icons/mac_20130504102327_2f0330fff1.png";
    let slogan = this.props.slogan || "全世界都在看";
    let userMenus = this.props.userMenus || [];
    let menucols = 4;
    if (userMenus.length > 0) {
      menucols = parseInt(12 / userMenus.length);
    }
    return (
      <li className="dropdown user user-menu">
        <a href="#" className="dropdown-toggle" data-toggle="dropdown">
          <img src={avatar}
            className="user-image" alt={nick}/>
          <span className="hidden-xs">{nick}</span>
        </a>
        <ul className="dropdown-menu">
          <li className="user-header">
            <img src={avatar}
              className="img-circle" alt={nick} />
            <p>
              {nick}
              <small>{slogan}</small>
            </p>
          </li>
          {userMenus.length > 0 ?
            <li className="user-body">
              <div className="row">
                {
                  userMenus.map(function (ele, idx) {
                    return (
                      <div className={"col-xs-" + menucols + " text-center"} key={idx}>
                        <a href={ele.href}>{ele.label}</a>
                      </div>
                    );

                  })
                }
              </div>
            </li> : null
          }
          <li className="user-footer">
            <div className="pull-left">
              {
                this.props.profileUrl ? <a href={this.props.profileUrl} className="btn btn-default btn-flat">我的资料</a> : null
              }
            </div>
            <div className="pull-right">
              <a className="btn btn-default btn-flat" onClick={this.logout}>退出</a>
            </div>
          </li>
        </ul>
      </li>
    );
  }
}