사용자 정의 반응 아이콘 컨텍스트 래퍼
6609 단어 contextreactictailwindcssreact
import React from 'react'
import { IconContext, IconType } from "react-icons";
type MyProps = {
// using `interface` is also ok
Icon: IconType;
size: string;
color: string;
iconstyle?:string;
iconAction?: () => any;
};
type MyState = {
iconstyle: string;
};
export class TheIcon extends React.Component<MyProps, MyState> {
constructor(props:MyProps) {
super(props)
this.state = { iconstyle:this.props?.iconstyle?this.props?.iconstyle:"" };
this.clickAction = this.clickAction.bind(this);
}
clickAction(){
if(this.props.iconAction){
console.log("click action")
return this.props.iconAction()
}
return console.log("")
}
render() {
return (
<div>
<IconContext.Provider value={{ size:this.props.size,color:this.props.color,
className:this.state.iconstyle}}>
<this.props.Icon onClick={()=>this.clickAction()}/>
</IconContext.Provider>
</div>
);
}
}
사용 예
import { FaTimes} from "react-icons/fa";
import { TheIcon } from './../Shared/TheIcon';
<TheIcon Icon={ FaTimes } size={"34"} color={"green"} />
full project
live demo
Reference
이 문제에 관하여(사용자 정의 반응 아이콘 컨텍스트 래퍼), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tigawanna/custom-react-icon-context-wrapper-58b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)