sourcecode/front/project/www/components/Header/index.js

import React from 'react';
import { Link } from 'react-router-dom';
import Assets from '@src/components/Assets';
import Button from '../Button';
import './index.less';
import { User } from '../../stores/user';

function Header(props) {
  const { tabs = [], active } = props;
  return (
    <div id="header">
      <div className="body">
        <div className="left">
          <Assets name="logo" svg />
        </div>
        <div className="center">
          <div className="tabs">
            {tabs.map(item => {
              return (
                <Link to={item.path}>
                  <div className={`tab ${active === item.key ? 'active' : ''}`}>{item.name}</div>
                </Link>
              );
            })}
          </div>
        </div>
        <div className="right">
          <Button onClick={() => {
            User.needLogin();
          }}>登录</Button>
        </div>
      </div>
    </div>
  );
}
Header.propTypes = {};
export default Header;