Question

我在React中使用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>
            )}

        </>
    )
}

我希望按钮在太阳和月亮之间切换，并能够在暗模式和亮模式之间切换。我似乎无法解决该问题，我也尝试过使用钩子来避免运气。

Answer 1

根据文档useDarkMode()返回一个对象，其属性类似于value：

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

因此很可能您可以尝试以下操作：

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

我希望这会有所帮助！

Answer 2

如果@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 function，无需使用enable或disable，因为您对这两个都使用了相同的按钮：

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

在React中在暗模式和亮模式之间切换

2 个答案: