如何在 React.js 的 HTML 标签（使用切换）中添加或删除 class

Question

尊敬的 Whosebug 用户。我需要使用 React.js 和 Tailwind 创建暗模式，但是当我的暗模式图标被点击时，我需要添加和删除 HTML 标签中的暗 class（在切换中)，但出现错误。

代码

const [isDark, setDark] = useState(false)
    const toggleDark = () => {
        setDark(!isDark)
       const html = document.getElementsByTagName("html")
        console.log(html);
        html.classList.toggle("dark")
    }

<span id='darkmode' className='w-5 h-5 bg-white block 
    cursor-pointer' onClick={toggleDark}></span>

错误

Cannot read properties of undefined (reading 'toggle')

Answer 1

你可以试试这个： w-5 h-5 bg-white block cursor-pointer ${isDark ? dark : ''}} onClick={toggleDark}>

Answer 2

document.getElementsByTagName("html")其实是returns一个数组。 classList 不是数组的属性，因此它变为未定义。为了实际切换它，获取数组的第一项，这将是 html 元素。

const html = document.getElementsByTagName("html")[0];

如何在 React.js 的 HTML 标签（使用切换）中添加或删除 class

How do I add or remove class from HTML tag (using toggle) in React.js

reactjs

tailwind-css