高階コンポーネント
asRagi.icon一般的なフックの仕組みの実装？ code:LoggetHOC.tsx
type InjectProps = { log: string };
export const withLogger = <T>(Component: React.ComponentType<T & InjectProps>) => {
return (props: T & InjectProps): JSX.Element => {
const { log } = props;
// ここでレンダリング前に処理を挟み込む
useEffect(() => {
console.log(${log} mount);
return () => console.log(${log} unmount);
}, []);
return <Component {...props} />;
}
}
code:use.tsx
const WrapTextButton = withLogger(TextButton);
return <WrapTextButton log="button a" />