你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

封装Icon组件

2021/12/17 12:37:08

封装思路

1 定目标:给出测试用例。

<Icon className="someClass" type="iconbtn_like_sel" onClick={()=>{console.log('test')}}/>

明确每个属性的:作用,名字,格式,可选值,是否必须...

2 分析 react中直接通过props来接收就行

3 逐个实现功能

// 组件 props 的类型
type Props = {
  // icon 的类型
  type: string
  // icon 的自定义样式
  className?: string
  // 点击事件
  onClick?: () => void
}

const Icon = ({ type, className, onClick }: Props) => {
  return (
    <svg
      className={'icon ' + className}
      aria-hidden="true"
      onClick={onClick}
    >
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}

export default Icon