如何更改导航栏徽标图像、背景和链接颜色？

Question

我有一个 Preact 项目，我想在开始向下滚动时更改导航栏背景颜色、img src 和链接颜色。我怎样才能做到这一点？我是 Preact 的新手，我只是将 class 命名为 class={style.classname} 有点令人困惑。感谢您的帮助。

Answer 1

对于 scroll 事件，您需要在 window 对象上注册，这是您组件之外的关注点。因此，如果使用基于 class 的组件，您可以使用适当的回调处理程序或使用 useEffect 挂钩在使用功能组件时注册外部事件。

例如，在使用功能组件时，您可以：

import { h } from 'preact';
import { useEffect } from 'preact/hooks';

function function addEvent(node, eventName, callback) {

  node.addEventListener(eventName, callback);

  // Note the use of de-registration/unsubscribe function
  return () => node.removeEventListener(eventName, callback);
}


export function AppComp(props) {

  // The dependency array is empty since it doesn't depend on anything.
  useEffect(() => {
    const deregister = addEvent(window, 'scroll', () => {
      // Your logic on scroll.
    });

    // Remove the event subscription when component is destroyed
    return () => deregister();
  }, []);

  return (
    <div>Hello</div>
  );
}

注意addEvent函数的使用。它 returns 一个注销功能，可用于删除附加事件，通常是在组件被销毁时确保没有内存泄漏或不需要的状态。

如何更改导航栏徽标图像、背景和链接颜色？

How can i change a navbar logo img, background and links color?

preact