1
0

index.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import './index.less';
  4. function UserLayout(props) {
  5. const { menu = [], active, right, center, ads = [], onClick } = props;
  6. return (
  7. <div className={`user-layout content ${right ? 'right' : ''}`} onClick={(e) => onClick && onClick(e)}>
  8. <div className="left-layout">
  9. <div className="block-layout">
  10. {menu.map(item => {
  11. return (
  12. <Link to={item.path} className={`item ${active === item.key ? 'active' : ''}`}>
  13. {item.short}
  14. </Link>
  15. );
  16. })}
  17. </div>
  18. </div>
  19. {center && (
  20. <div className="center-layout">
  21. {center.length > 0 ? (
  22. center.map(item => {
  23. if (!item) return null;
  24. return <div className="block-layout">{item}</div>;
  25. })
  26. ) : (<div className="block-layout">{center}</div>)}
  27. </div>
  28. )}
  29. {right && (
  30. <div className="right-layout">
  31. {right.length > 0 ? (
  32. right.map(item => {
  33. if (!item) return null;
  34. return <div className="block-layout">{item}</div>;
  35. })
  36. ) : (<div className="block-layout">{right}</div>)}
  37. {ads.length > 0 && ads.map(item => {
  38. return <div className="block-layout">{item}</div>;
  39. })}
  40. </div>
  41. )}
  42. </div>
  43. );
  44. }
  45. export default UserLayout;