Question

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

Answer 1

对于 scroll 事件，您需要在window对象上注册，这是组件外部的关注点。因此，如果使用基于类的组件，则可以在使用功能组件时使用适当的回调处理程序或使用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函数的使用。它返回一个取消注册功能，该功能可用于删除附加事件，通常是在销毁组件时确保没有内存泄漏或不良状态。

如何更改导航栏徽标img，背景和链接颜色？

1 个答案: