在React中切换黑暗和光明模式

问题描述 投票:0回答:1

我用的是 useDarkMode 库中。

import useDarkMode from 'use-dark-mode'

const DarkModeToggle = () => {
    const darkMode = useDarkMode(false)
    return (
        <>
            {darkMode ? (
                <button type="button" onClick={darkMode.disable}>
                    ☀
                </button>
            ) : (
                <button type="button" onClick={darkMode.enable}>
                    ☾
                </button>
            )}

        </>
    )
}

我希望按钮能够在太阳和月亮之间切换,并且能够在黑暗模式和光明模式之间切换。我似乎无法解决如何做到这一点,我也试过使用钩子来实现,但没有成功。

javascript reactjs react-hooks styling
1个回答
4
投票

基于文档 useDarkMode() 返回一个具有以下属性的对象 value:

value: 一个包含当前黑暗模式状态的布尔值。

所以你可以试试下面的方法。

{darkMode.value ? (
   <button type="button" onClick={darkMode.disable}>
       ☀
   </button>
) : (
   <button type="button" onClick={darkMode.enable}>
       ☾
   </button>
)}

我希望这能帮到你!


3
投票

如果@norbitrial的答案是正确的,你可能也有办法缩短你的代码来提高它的可读性。

<button type='button' onClick={darkMode.value ? darkMode.disable : darkMode.enable}>
     {darkMode.value ? '☀' : '☾' }
</button>

更进一步。

const DarkModeToggle = () => {
    const { value, disable, enable } = useDarkMode(false)
    return (
        <button type='button' onClick={value ? disable : enable}>
            {value ? '☀' : '☾'}
        </button>
    )
}

该库似乎还提供了一个 toggle 功能,消除了对 enabledisable现在,你使用相同的按钮为两个。

const DarkModeToggle = () => {
    const { value, toggle } = useDarkMode(false)
    return (
        <button type='button' onClick={toggle}>
            {value ? '☀' : '☾'}
        </button>
    )
}
© www.soinside.com 2019 - 2024. All rights reserved.