封装思路
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
