如何將document.addEventListener("scroll")放在其他檔案中以在我的組件中呼叫它？

我有這個代碼，我可以用它檢查何時達到bottoma ：divscrolling

const checkBottomDiv = (el: HTMLElement) => {
  return el.getBoundingClientRect().bottom - 400 <= window.innerHeight;
};

const contentArticleId = document.getElementById("myDiv") as HTMLElement;

const trackScrolling = () => {
  callback();

  if (checkBottomDiv(contentArticleId)) {
    console.log("bottomDiv");
    document.removeEventListener("scroll", trackScrolling);
  }
};
document.addEventListener("scroll", trackScrolling);

我想在其他地方重用這個功能，components因此，我想把這個邏輯放在一個單獨的函式中，然后呼叫它（function.ts）。

我正在這樣做：

app.tsx.  //component

useEffect(() => {
  let element = document.getElementById("myDiv") as HTMLElement;
  trackScrolling(element, callback);
})


function.ts. //function file

const checkBottomDiv = (el: HTMLElement) => {
  return el.getBoundingClientRect().bottom - 400 <= window.innerHeight;
};

export const trackScrolling = (element: HTMLElement, callback: () => void) => {
  if (checkBottomDiv(element)) {
    callback();
    document.removeEventListener("scroll", trackScrolling);
  }
};
document.addEventListener("scroll", trackScrolling);

但我收到了我不知道如何修復的錯誤。

這是我的實時代碼：

https://codesandbox.io/s/epic-solomon-hu3e3

我做錯了什么，我該如何解決。

uj5u.com熱心網友回復：

即使您可以，但您實際上可能不想這樣做。更好的方法是在 componentDidMount 生命周期或 useEffect 鉤子中附加事件偵聽器。這轉化為以下代碼：

const MyWrapperComponent = (props) => {
  useEffect(()=>{
    document.addEventListener('scroll', (e)=>{
       // do something
    });
    return ()=>{
      document.removeEventListener("scroll");
    }
  },[]);
}

但是由于您想在許多組件中使用滾動事件，將這個 useEffect 鉤子放在所有組件中會使您的代碼變得意大利式，因此為了避免這種情況，您可以使用背景關系 API 與所有需要它的組件共享事件資料.

uj5u.com熱心網友回復：

你document.addEventListener("scroll", trackScrolling);不在trackScrolling函式內。您需要將它移動到函式體內部，以便它可以訪問callback. 您的代碼應如下所示：

export const trackScrolling = (element: HTMLElement, callback: () => void) => {
  if (element && checkBottomDiv(element)) {
    callback();
    document.removeEventListener("scroll", trackScrolling);
  }
  document.addEventListener("scroll", trackScrolling);
};

此外，當像這樣為 React 撰寫自定義功能時，如果邏輯依賴于一個鉤子（比如useEffect），那么在自定義函式中也包含這個鉤子會更清晰。例如，您可能想要更像這樣的東西：

app.tsx.  //component

useTrackScrolling("myDiv", callback);


function.ts. //function file

const checkBottomDiv = (el: HTMLElement) => {
  return el.getBoundingClientRect().bottom - 400 <= window.innerHeight;
};

export const useTrackScrolling = (id: string, callback: () => void) => {
  const element = document.getElementById(id) as HTMLElement;

  useEffect(() => {
    const listener = () => {
      if (element && checkBottomDiv(element)) {
        callback();
        document.removeEventListener("scroll", listener);
      }
    }

    document.addEventListener("scroll", listener);
    return () => document.removeEventListener("scroll", listener);
  }, [element, callback]);
};

不過，這只是我的意見，您可以根據自己的喜好撰寫代碼:)

標籤：javascript 反应 dom

上一篇：如何在unix中打開現有的腳本

下一篇：HTMLFigure標簽用法