如何将外部js文件链接到reactjs应用程序并在react应用程序中进行更改

Question

实际上，我有一个标题，在滚动图标时，标题内的所有内容都应该变为黑色，标题背景应该是白色
顺便说一句，我知道如何在另一条路径而不是主路径上更改bgcolor
我还想通过链接外部js文件而不是内联样式来实现这些更改属性

如何在react应用程序中做到这一点

下面是一个可以展示你想法的例子。Codesandbox

基本上我需要两样东西

1. 当我们进入DASA页面主页时。滚动时，其bgcolor以及文本和图标的颜色应该会发生变化
2. 当我们转到登录页面/SIGN或单击person icon时。在该页眉中，文本和图标的颜色应该在不滚动的情况下更改

如何使用外部js文件实现这一切

Answer 1

对于1。您可以使用此内置功能检查用户何时滚动https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo所以在useEffect中运行这个。您还需要设置bg颜色状态默认值。因此，当您第一次渲染组件时，请使用该状态bgcolor，然后在用户滚动时运行useEffect像这个

useEffect(()=>{ setBgColor(red) }, [window.scrollTo(0, 0);])

对于2。使用onClick处理程序人员图标并使用类似的逻辑

const onChangeColor = () => {
if(math.route === singIn ) {
setBgcolor(red)
}
}
<img personIcon onClick={onChanageColor} />