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

import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';

function getItem(props, item, onChange) {
  const { width, space, active } = props;
  return (
    <div
      onClick={() => active !== item.key && onChange && onChange(item.key)}
      style={{ width: width || '', marginLeft: space || '', marginRight: space || '' }}
      className={`tab ${active === item.key ? 'active' : ''}`}
    >
      {item.name || item.title}
    </div>
  );
}

function Tabs(props) {
  const { tabs = [], type = 'line', theme = 'default', border, space, onChange } = props;
  return (
    <div className={`tabs ${type} ${theme} ${border ? 'border' : ''}`}>
      <div className="tabs-warpper" style={{ marginLeft: space * -1 || '', marginRight: space * -1 || '' }}>
        {tabs.map(item => {
          return item.path ? <Link to={item.path}>{getItem(props, item)}</Link> : getItem(props, item, onChange);
        })}
      </div>
    </div>
  );
}
Tabs.propTypes = {};
export default Tabs;