Javascript 在使用use scroll position滚动后，如何向React组件添加类名？

当用户开始滚动时，我试图将标题（react组件）的背景颜色从透明更改为白色

我使用它来获取窗口的当前“y”位置，并能够记录该位置以确认它是否正常工作。我正试图学习现代Javascript，并通过构建一些东西来做出反应，对此我很感兴趣

我希望事件处理程序看到我位于大于0的y位置，并将标题类名从默认状态透明更改为“白色”（或任何类名）

我就在这里……我不知道该从这里走到哪里

import React, { useState } from "react"
import { useScrollPosition } from "@n8tb1t/use-scroll-position"


const Header = () => {
  const [headerColor, setHeaderColor] = useState("transparent")
  useScrollPosition(
    ({ prevPos, currPos }) => {
      console.log(currPos.y)
    },
    [headerColor],
    false,
    false,
    300
  )

  return (
    (
      <header className={headerColor}>

        <nav>
          <ul>
            <li>
              <p>one</p>
            </li>
            <li>
              <p>two</p>
            </li>
            <li>
              <p>three</p>
            </li>
          </ul>
        </nav>
      </header>
    )
  )
}

export default Header

import React，{useState}来自“React”
从“@n8tb1t/使用滚动位置”导入{UseCollPosition}
常量头=（）=>{
常量[headerColor，setHeaderColor]=useState（“透明”）
使用滚动位置(
（{prevPos，currPos}）=>{
控制台日志（当前位置）
},
[headerColor]，
假,，
假,，
300
)
返回(
(


一个



两个



三



)
)
}
导出默认标题

if（curPos.y>0）{setHeaderColor（'white'）}@HMR您已经在那里了，谢谢。它不在那个代码示例中，但我已经将一些类名分配给了header，只想在scroll上添加/删除一个类名（而不是擦除所有现有的类名）。有什么想法吗？在你的jsx中你可以这样做：

className={``一二三${headerColor}`}

（用一个勾号替换``因为注释会阻止我在这里输入正确的代码）@HMR谢谢，我走对了方向。出于某种原因，整个标题被替换为字符串“白色”和“透明”（可能超出了这个问题的范围）。但是，我可以看到他们在滚动时交换。我明白了。我有，``，[headerColor]）}``这是问题的根源