ReactJS 获取视窗/窗口高度权威指南：2种简单方法

获取视窗/窗口高度：ReactJS 权威指南

前言

在构建用户界面时，获取视窗或窗口高度至关重要。ReactJS，作为前端开发的利器，提供了多种方法来轻松实现这一目标。本文将深入探讨如何利用 ReactJS 获取视窗或窗口高度，并提供详细的代码示例和注意事项，帮助你解决实际开发中的问题。

一、使用 window.innerHeight

window.innerHeight 属性可直接返回浏览器窗口的可视高度（不包括滚动条）。在 React 组件中，你可以使用此属性来获取窗口高度。

import React, { useEffect, useState } from "react";

const MyComponent = () => {
  const [windowHeight, setWindowHeight] = useState(0);

  useEffect(() => {
    setWindowHeight(window.innerHeight);
  }, []);

  return <div>窗口高度：{windowHeight}</div>;
};

export default MyComponent;

二、使用 ReactDOM.findDOMNode()

ReactDOM.findDOMNode() 方法可返回给定 React 组件的底层 DOM 节点。你可以使用此方法获取 document 或 body 元素的引用，然后使用 offsetHeight 或 clientHeight 属性来获取窗口高度。

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

const MyComponent = () => {
  const [windowHeight, setWindowHeight] = useState(0);

  useEffect(() => {
    const bodyElement = ReactDOM.findDOMNode(document.body);
    setWindowHeight(bodyElement.offsetHeight);
  }, []);

  return <div>窗口高度：{windowHeight}</div>;
};

export default MyComponent;

注意事项

• 这些方法返回的是窗口高度，但不包括滚动条高度。
• 如果窗口大小发生变化，你需要使用 useEffect() 钩子来更新窗口高度状态。
• 这些方法也可以用于获取视窗高度，视窗高度等于浏览器窗口减去工具栏和地址栏的高度。

结论

获取视窗或窗口高度是 ReactJS 开发中的常见任务。本文提供了两种简单有效的方法，帮助你轻松解决这一问题。通过理解 window.innerHeight 和 ReactDOM.findDOMNode() 的使用方法，你将能够创建高度响应且适应性的用户界面。

常见问题解答

1. 如何获取视窗高度，包括滚动条高度？

   • document.documentElement.scrollHeight 或 document.body.scrollHeight 可获取视窗高度，包括滚动条高度。

2. 如何监听窗口大小变化？

   • useEffect() 钩子可用于在窗口大小发生变化时触发函数。

3. 为什么 window.innerHeight 有时会返回 0？

   • 确保你正在组件已挂载后获取窗口高度。

4. 有什么方法可以获取工具栏和地址栏的高度？

   • 结合使用 window.outerHeight 和 window.innerHeight 可以计算工具栏和地址栏的高度。

5. 是否可以在服务器端渲染中使用 window.innerHeight？

   • window.innerHeight 在服务器端渲染中不可用，因为没有浏览器环境。