迹忆客 专注技术分享

向 body 元素添加事件监听器：

1. 访问文档对象上的 body 元素。
2. 在 useEffect 钩子中对 body 元素使用 addEventListener() 方法。
3. 当组件卸载时移除事件侦听器。

import {useEffect} from 'react';

export default function App() {
  useEffect(() => {
    function handleClick() {
      console.log('click event triggered');
    }

    // 👇️ optionally set body height to full screen
    document.body.style.minHeight = '100vh';

    document.body.addEventListener('click', handleClick);

    return () => {
      // 👇️ remove event listener when the component unmounts
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <h2>Hello jiyik.com</h2>
    </div>
  );
}

我们可以访问文档对象上的 body 元素。

我们将一个空的 dependencies 数组传递给 useEffect 钩子，因为我们只想将事件侦听器添加到 body 元素一次 - 当组件安装时。

useEffect(() => {
  function handleClick() {
    console.log('click event triggered');
  }

  document.body.style.minHeight = '100vh';

  document.body.addEventListener('click', handleClick);

  return () => {
    document.body.removeEventListener('click', handleClick);
  };
}, []);

该示例显示了如何添加点击事件侦听器，但这种方法适用于任何其他事件类型。

addEventListener 方法采用的第一个参数是要侦听的事件的类型，第二个参数是在指定类型的事件发生时调用的函数。

在示例中，我们将 minHeight CSS 属性设置为 100vh 以使 body 元素全高。

我通常在我的 index.css 文件中这样做。

body {
  min-height: 100vh;
}

确保将 index.css 文件导入到 index.js 文件中。

import './index.css'

我们从 useEffect 钩子返回的函数在组件卸载时被调用。

我们使用 removeEventListener 方法来删除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。