极客教程如何使用useViewport hook根据视口尺寸更新布局
在当今的数字环境中，Web应用程序需要对不同的屏幕尺寸和设备进行响应和适应。React中的useViewport hook允许开发人员轻松访问视口的尺寸并响应视口尺寸的变化，从而成为构建响应式Web应用程序的强大工具。
useViewport hook 是一个自定义hook，它允许你在React应用程序中响应视口尺寸的变化。它为你提供了当前视口的尺寸，如视口的宽度和高度，并允许你根据这些尺寸更新组件的布局或样式。 react-viewport-hooks 是一个库，它提供了一组用于处理视口尺寸和媒体查询的hooks。useViewport是这个库提供的hooks之一，它允许你获取当前视口的尺寸并响应视口尺寸的变化。例如，我们可以使用useViewport hook在较小的屏幕上创建一个响应式导航栏，它会在折叠成汉堡菜单。或者，根据视口的宽度在网格中更改列的数量的布局。这样可以实现不同设备和屏幕尺寸之间的无缝用户体验，因为布局将实时适应视口尺寸。
先决条件：
- ReactJS的介绍和安装
- React Hooks
语法：
const {vw,vh} = useViewport();
参数：
- vw： vw代表“视口宽度”。
- vh： vh代表“视口高度”。
它们是CSS中用于描述元素大小相对于视口大小的单位。
创建React应用：
步骤1： 创建一个项目目录，打开终端，使用以下命令创建一个名为 useviewport-example 的React应用：
npx create-react-app useviewport-example
步骤2: 创建useviewport-example app后，通过输入以下命令切换到新文件夹useviewport-example：
cd useviewport-example
使用 useViewport hook 的步骤：
要在项目中使用 useViewport hook，首先您需要安装 react-viewport-hooks 包。您可以通过在终端中运行以下命令来安装它：
npm install react-viewport-hooks
然后，你可以在你的React组件中导入这个hook：
import { useViewport } from 'react-viewport-hooks';
项目结构：
我们将修改文件夹并保留我们在此示例中所需的文件。现在，请确保您的文件结构如下所示：
示例1： 当视口变窄时，将网格布局调整为列表布局。我们将检查视口宽度是否小于768px。如果是，则将 layout 变量设置为“list”。否则，将 layout 变量设置为“grid”。然后，我们将渲染div。在其中，使用三元运算符来检查布局变量，如果是网格布局，则渲染组件 <GridLayout /> ，否则渲染 <ListLayout /> 。
App.js： 将以下Javascript代码添加到 App.js文件
App.css： 将以下代码添加到 App.css 以样式化应用程序。
import React from 'react';
import { useViewport } from 'react-viewport-hooks';
import './App.css';
const GridLayout = () => {
return (
<div className="grid-layout">
<div className="grid-item">Grid-Item 1</div>
<div className="grid-item">Grid-Item 2</div>
<div className="grid-item">Grid-Item 3</div>
<div className="grid-item">Grid-Item 4</div>
</div>
);
};
const ListLayout = () => {
return (
<ul className="list-layout">
<li className="list-item">List-Item 1</li>
<li className="list-item">List-Item 2</li>
<li className="list-item">List-Item 3</li>
<li className="list-item">List-Item 4</li>
</ul>
);
};
const App=()=> {
const { vw } = useViewport();
console.log(vw);
let layout = 'grid';
if (vw < 768) {
layout = 'list';
}
return (
<div>
{ layout === 'grid' ? <GridLayout /> : <ListLayout /> }
</div>
);
}
export default App;
CSS
.grid-layout {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: green;
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
}
.list-layout {
list-style-type: none;
padding: 0;
}
.list-item {
background-color: pink;
padding: 10px;
margin-bottom: 10px;
text-align: center;
}
运行应用程序的步骤： 通过使用以下命令运行应用程序：
npm start
输出: 默认情况下，React项目将在3000端口上运行。您可以在浏览器中通过localhost:3000访问它。按下 F12 打开DevTools，并点击“设备切换工具栏”以调整视口。
随着视口大小的减小，元素的布局从网格布局变为列表布局。
示例2： 在这个示例中，useViewport hook返回当前视口的宽度。如果宽度大于768，则显示完整的导航栏。如果宽度小于或等于768，则显示“菜单”按钮。当点击“菜单”按钮时，使用setMenuOpen更新menuOpen的状态，并且如果menuOpen为true，则显示子菜单。
App.js： 将以下Javascript代码添加到App.js文件中。
App.css： 将以下代码添加到App.css中以样式化应用程序。
import React, { useState } from 'react';
import { useViewport } from 'react-viewport-hooks';
import './App.css'
const Navbar = () => {
const { vw } = useViewport();
const [menuOpen, setMenuOpen] = useState(false);
return (
<nav>
<ul>
<li>Home</li>
{vw > 768 ? (
<>
<li>About</li>
<li>Contact</li>
</>
) : (
<li onClick={() => setMenuOpen(!menuOpen)}>
Menu
{menuOpen && (
<ul>
<li>About</li>
<li>Contact</li>
</ul>
)}
</li>
)}
</ul>
</nav>
);
};
export default Navbar;
CSS
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
li {
margin: 0 1rem;
}
ul ul {
display: none;
position: absolute;
background-color: lightgray;
}
li:hover>ul {
display: block;
}
运行应用程序的步骤：
使用以下命令来运行应用程序：
npm start
输出： 默认情况下，React项目将运行在3000端口上。您可以在浏览器中通过localhost:3000访问它。按下F12键打开开发者工具，并点击“设备切换工具栏”来调整视口。
