封装Icon 图片通用组件react中使用

定目标：给出测试用例。

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

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


react中直接通过props来接收就行

步骤

1. 在 components 目录中，创建 Icon/index.tsx 文件
2. 创建 Icon 组件，并指定 props 类型

核心代码

components/Icon/index.tsx 中：

// 组件 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

封装组件的思路：测试驱动开发