陈晓雨 - Githubissues

hotjp commented 4 years ago

建议：

react相关，例：生命周期、更新机制、状态管理、组件开发方式、hook
设计模式相关
ES6、7 特性

alicloud-campus commented 4 years ago

练习：用react实现一个带hover延时的导航，类似淘宝、京东主站的导航

GinaChenxiaoyu commented 4 years ago

import React from 'react';
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const menu_1 = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        已买到的宝贝
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        我的足迹
      </a>
    </Menu.Item>
  </Menu>
);
const menu_2 = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        收藏的宝贝
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        收藏的店铺
      </a>
    </Menu.Item>
  </Menu>
);

export default function PageA() {
  return (
    <div>
      <Dropdown overlay={menu_1}>
        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          我的淘宝 <DownOutlined />
        </a>
      </Dropdown>
      <Dropdown overlay={menu_2}>
        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          收藏夹 <DownOutlined />
        </a>
      </Dropdown>
    </div>
  );
}

hover已经有一个默认的延时时长了，若要修改，在antd里控制ant-dropdown-link ant-dropdown-trigger的样式里设置。

alicloud-campus commented 4 years ago

这里不是说直接用现成的组件哈，经常会有业务场景是不能用现成的组件库的，建议自己实现下。这里看下主导航菜单吧，比如从一级女装快速hover到鞋靴，二级导航内容是不变的

alicloud-campus / 2021-campus-recruitment

陈晓雨 #2