React 全局变量：在 React 应用程序中访问和使用浏览器全局变量

2023-11-20 05:51:27

React 中的全局变量：在应用程序中访问浏览器信息

什么是 React 中的全局变量？

React 是用于构建用户界面的 JavaScript 库，它使开发人员能够创建高效且交互式 Web 应用程序。React 中的全局变量是指在整个应用程序中都可以访问的变量。

在 React 中，使用 window 对象可以访问浏览器中的全局变量。window 对象是一个包含浏览器所有全局变量和函数的全局对象。这意味着如果你想在 React 应用程序中使用浏览器中的 location 对象，只需执行以下操作：

const location = window.location;

现在，你可以在 React 应用程序中使用 location 对象。例如，你可以使用 location.href 获取当前页面的 URL，或使用 location.pathname 获取当前页面的路径。

如何在 React 中使用 Window 对象？

要在 React 中使用 window 对象，请执行以下步骤：

在你的 React 组件中导入 window 对象。
使用 window 对象访问浏览器全局变量和函数。
使用 window 对象操作浏览器元素和事件。

以下是如何在 React 中使用 window 对象的示例代码：

// 导入 window 对象
import { useEffect } from "react";

// 在组件中使用 window 对象
const MyComponent = () => {
  useEffect(() => {
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
      // 更新组件状态
      this.setState({ width: window.innerWidth, height: window.innerHeight });
    });

    // 返回清理函数，在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("resize", () => {});
    };
  }, []);

  return (
    <div>
      <h1>窗口大小</h1>
      <p>宽度：{this.state.width}px</p>
      <p>高度：{this.state.height}px</p>
    </div>
  );
};