ReactHook的使用示例

type NativeButtOnProps= MyButtonProps & React.ButtonHTMLAttributes

import React from 'react'
import classNames from 'classnames'

type ButtOnSize= 'large' | 'small'
type ButtOnType= 'primary' | 'default' | 'danger'

interface BaseButtonProps {
 className&＃63;: string;
 disabled&＃63;: boolean;
 size&＃63;: ButtonSize;
 btnType&＃63;: ButtonType;
 children&＃63;: React.ReactNode;
}

type NativeButtOnProps= BaseButtonProps & React.ButtonHTMLAttributes
const Button: React.FC= (props) => {
 const {
 btnType,
 className,
 disabled,
 size,
 children,
 // resProps用于取出所有剩余属性
 ...resProps
 } = props
 // btn, btn-lg, btn-primary
 const classes = classNames('btn', className, {
 [`btn-${btnType}`]: btnType,
 [`btn-${size}`]: size,
 'disabled': disabled
 })
 return (
 
  {children}
 
 )
}

Button.defaultProps = {
 disabled: false,
 btnType: 'default'
}

export default Button

Hello
Hello
 alert('haha')}>Test

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

Hello

 {alert(index)}} mode="vertical" defaultOpenSubMenus={['2']}>
 
 cool link
 
 
 cool link 2
 
 
 
  dropdown 1
 
 
  dropdown 2
 
 
 
 cool link 3
 

 {alert(index)}}>

type SelectCallback = (selectedIndex: string) => void

interface MenuProps {
 onSelect&＃63;: SelectCallback;
}

 const handleClick = (index: string) => {
 // onSelect是一个联合类型，可能存在，也可能不存在，对此需要做判断
 if (onSelect) {
  onSelect(index)
 }
 }

if (displayName === 'MenuItem' || displayName === 'SubMenu') {
 // 以element元素为样本克隆并返回新的React元素，第一个参数是克隆样本
 return React.cloneElement(childElement, {
 index: index.toString()
 })
} else {
 console.error("Warning: Menu has a child which is not a MenuItem component")
}

import React, { useState, createContext } from 'react'
import classNames from 'classnames'
import { MenuItemProps } from './menuItem'

type MenuMode = 'horizontal' | 'vertical'
type SelectCallback = (selectedIndex: string) => void

export interface MenuProps {
 defaultIndex&＃63;: string; // 用于哪个menu子组件是高亮显示
 className&＃63;: string;
 mode&＃63;: MenuMode;
 style&＃63;: React.CSSProperties;
 onSelect&＃63;: SelectCallback; // 点击子菜单时可以触发回调 
 defaultOpenSubMenus&＃63;: string[]; 
}

// 确定父组件传给子组件的数据类型
interface IMenuContext {
 index: string;
 onSelect&＃63;: SelectCallback;
 mode&＃63;: MenuMode;
 defaultOpenSubMenus&＃63;: string[]; // 需要将数据传给context
}

// 创建传递给子组件的context
// 泛型约束，因为index是要输入的值，所以这里写一个默认初始值
export const MenuCOntext= createContext({index: '0'})

const Menu: React.FC = (props) => {
 const { className, mode, style, children, defaultIndex, onSelect, defaultOpenSubMenus} = props
 // MenuItem处于active的状态应该是有且只有一个的，使用useState来控制其状态
 const [ currentActive, setActive ] = useState(defaultIndex)
 const classes = classNames('menu-demo', className, {
 'menu-vertical': mode === 'vertical',
 'menu-horizontal': mode === 'horizontal'
 })

 // 定义handleClick具体实现点击menuItem之后active变化
 const handleClick = (index: string) => {
 setActive(index)
 // onSelect是一个联合类型，可能存在，也可能不存在，对此需要做判断
 if (onSelect) {
  onSelect(index)
 }
 }

 // 点击子组件的时候，触发onSelect函数，更改高亮显示
 const passedContext: IMenuCOntext= {
 // currentActive是string | undefined类型，index是number类型，所以要做如下判断进一步明确类型
 index: currentActive &＃63; currentActive : '0',
 onSelect: handleClick, // 回调函数，点击子组件时是否触发
 mode: mode,
 defaultOpenSubMenus,
 }

 const renderChildren = () => {
 return React.Children.map(children, (child, index) => {
  // child里面包含一大堆的类型，要想获得我们想要的类型来提供智能提示，需要使用类型断言  
  const childElement = child as React.FunctionComponentElement
  const { displayName } = childElement.type
  if (displayName === 'MenuItem' || displayName === 'SubMenu') {
  // 以element元素为样本克隆并返回新的React元素，第一个参数是克隆样本
  return React.cloneElement(childElement, {
   index: index.toString()
  })
  } else {
  console.error("Warning: Menu has a child which is not a MenuItem component")
  }
 })
 }
 return (
 

  
  {renderChildren()}
  
 
 )
}

Menu.defaultProps = {
 defaultIndex: '0',
 mode: 'horizontal',
 defaultOpenSubMenus: []
}

export default Menu

import React from 'react'
import { useContext } from 'react'
import classNames from 'classnames'
import { MenuContext } from './menu'

export interface MenuItemProps {
 index: string;
 disabled&＃63;: boolean;
 className&＃63;: string;
 style&＃63;: React.CSSProperties;
}

const MenuItem: React.FC = (props) => {
 const { index, disabled, className, style, children } = props
 const cOntext= useContext(MenuContext)
 const classes = classNames('menu-item', className, {
 'is-disabled': disabled,
 // 实现高亮的具体逻辑
 'is-active': context.index === index
 })
 const handleClick = () => {
 // disabled之后就不能使用onSelect，index因为是可选的，所以可能不存在，需要用typeof来做一个判断
 if (context.onSelect && !disabled && (typeof index === 'string')) {
  context.onSelect(index)
 }
 }
 return (
 

  {children}
 
 )
}

MenuItem.displayName = 'MenuItem'
export default MenuItem

import React, { useContext, FunctionComponentElement, useState } from 'react'
import classNames from 'classnames'
import { MenuContext } from './menu'
import { MenuItemProps } from './menuItem'

export interface SubMenuProps {
 index&＃63;: string;
 title: string;
 className&＃63;: string
}

const SubMenu: React.FC = ({ index, title, children, className }) => {
 const cOntext= useContext(MenuContext)
 // 接下来会使用string数组的一些方法，所以先进行类型断言，将其断言为string数组类型
 const openedSubMenus = context.defaultOpenSubMenus as Array
 // 使用include判断有没有index
 const isOpened = (index && context.mode === 'vertical') &＃63; openedSubMenus.includes(index) : false
 const [ menuOpen, setOpen ] = useState(isOpened) // isOpened返回的会是true或者false，这样就是一个动态值
 const classes = classNames('menu-item submenu-item', className, {
 'is-active': context.index === index
 })
 // 用于实现显示或隐藏下拉菜单
 const handleClick = (e: React.MouseEvent) => {
 e.preventDefault()
 setOpen(!menuOpen)
 }
 let timer: any
 // toggle用于判断是打开还是关闭
 const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
 clearTimeout(timer)
 e.preventDefault()
 timer = setTimeout(()=> {
  setOpen(toggle)
 }, 300)
 }
 // 三元表达式，纵向
 const clickEvents = context.mode === 'vertical' &＃63; {
 onClick: handleClick
 } : {}
 const hoverEvents = context.mode === 'horizontal' &＃63; {
 onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true) },
 onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false) },
 } : {}

 // 用于渲染下拉菜单中的内容
 // 返回两个值，第一个是child，第二个是index，用i表示
 const renderChildren = () => {
 const subMenuClasses = classNames('menu-submenu', {
  'menu-opened': menuOpen
 })
 // 下面功能用于实现在subMenu里只能有MenuItem
 const childrenCompOnent= React.Children.map(children, (child, i) => {
  const childElement = child as FunctionComponentElement
  if (childElement.type.displayName === 'MenuItem') {
  return React.cloneElement(childElement, {
   index: `${index}-${i}`
  })
  } else {
  console.error("Warning: SubMenu has a child which is not a MenuItem component")
  }
 })
 return (
  

  {childrenComponent}
  
 )
 }
 return (
 // 展开运算符，向里面添加功能，hover放在外面
 

  

  {title}
  
  {renderChildren()}
 
 )
}

SubMenu.displayName = 'SubMenu'
export default SubMenu