溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在React中實(shí)現(xiàn)自定義Hook進(jìn)行窗口尺寸追蹤

發(fā)布時(shí)間：2024-06-17 15:07:47 來源：億速云 閱讀：91 作者：小樊 欄目：web開發(fā)

在React中實(shí)現(xiàn)自定義Hook進(jìn)行窗口尺寸追蹤可以通過以下步驟實(shí)現(xiàn)：

  1. 創(chuàng)建一個(gè)新的文件，命名為useWindowSize.js，并在該文件中編寫自定義Hook的邏輯：
import { useState, useEffect } from 'react';

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
};

export default useWindowSize;
  1. 在需要使用窗口尺寸的組件中引入該自定義Hook，并調(diào)用它：
import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
  const windowSize = useWindowSize();

  return (
    <div>
      <p>Window width: {windowSize.width}</p>
      <p>Window height: {windowSize.height}</p>
    </div>
  );
};

export default App;
  1. 現(xiàn)在，當(dāng)組件渲染時(shí)，自定義Hook會(huì)追蹤窗口尺寸的變化，并在窗口大小發(fā)生變化時(shí)更新組件的狀態(tài)，從而實(shí)現(xiàn)窗口尺寸的追蹤。
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手