[筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項 @地瓜大的飛翔旅程

章節連結

內容
程式碼
系列文章

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下 useCallback 和 TS 搭配使用時的注意事項。

內容

1. 若你的 styled.<DOM> 要使用上層傳進來 props 的內容，那該值請在 function component 設定好後，再傳給 styled.<DOM> 內，以免 TS 報錯

interface SwitchModeBtnProps {
    currentTheme: ThemeModeType;
    setCurrentTheme: (value: ThemeModeType) => void;
}

const SwitchModeBtn = ({currentTheme, setCurrentTheme}: SwitchModeBtnProps) => {
    const backgroundColor = currentTheme === ThemeMode.DARK ? "green" : "red"


    const StyledSwitchModeBtn = styled.button`
        background-color: ${backgroundColor};
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    `

    return (
        <StyledSwitchModeBtn onClick={()=> setCurrentTheme(currentTheme === ThemeMode.DARK ? ThemeMode.LIGHT : ThemeMode.DARK)}>切換模式</StyledSwitchModeBtn>
    )
}